/* Melvin's Mobile Auto Detailing site stylesheet (2026-09-30; every rule is scoped by the body class .mmd-site). 
/* Melvin's Mobile Auto Detailing homepage pilot (sandbox page 2328 only; mirror of the child theme's
   custom/css/melvins-pilot.css). Brand card (red since Tony 2026-09-24): charcoal #1F2429, red #C8102E, deep red #9B111E, mist #F4F7F9,
   light red #F26D6D for accents on charcoal. Bebas Neue headings, Barlow body. Colour hovers only, no motion. */

/* Header: logo, menu and call button centred on one midline (Divi renders the row as floated columns, each only as
   tall as its content). Below 981px they sit on one line; on phones the button gives way to the fixed call bar. */
.mmd-head-main { display: flex !important; flex-wrap: nowrap; align-items: center; column-gap: 24px; }
.mmd-head-main > .et_pb_column { width: auto !important; margin-right: 0 !important; }
.mmd-head-logo, .mmd-head-cta { flex: 0 0 auto; }
.mmd-head-nav { flex: 1 1 auto; }
@media (max-width: 980px) {
	.mmd-head-main { column-gap: 14px; }
	.mmd-head-main > .et_pb_column { width: auto !important; margin-bottom: 0 !important; }
	.mmd-head-logo { flex: 1 1 auto; order: 1; }
	.mmd-head-cta { flex: 0 0 auto; order: 2; }
	.mmd-head-nav { flex: 0 0 auto; order: 3; }
}
@media (max-width: 767px) {
	.mmd-head-cta { display: none !important; }
	/* the strip wraps to three lines on phones; with the sticky bar and the fixed call bar it takes too much screen, and
	   the service area and the second number appear in the hero, the steps and the call card */
	.mmd-header .et_pb_row:has(.mmd-strip) { display: none !important; }
}

/* The brief's sticky call button on phones: a teal bar fixed along the bottom of the screen */
.mmd-callbar-row { display: none !important; }
@media (max-width: 767px) {
	.mmd-callbar-row { display: block !important; position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 9999; margin: 0 !important;
		background: #C8102E; box-shadow: 0 -4px 14px rgba(31, 36, 41, 0.18); }
	.mmd-callbar-row .et_pb_column { margin: 0 !important; }
	.mmd-callbar a { display: block; padding: 15px 16px; color: #fff !important; text-decoration: none; }
	/* the footer's last band runs under the bar instead of the page ending at it (2026-10-06: the copyright line sat 8px above
	   a 56px bar, and a full-page capture drew the bar over it); the dark band fills the space, no white strip */
	.mmd-site .et-l--footer .et_pb_section:last-child { padding-bottom: 84px !important; }
}

/* Hero: the two actions side by side (stacked on phones) and the Since 1998 seal */
.mmd-hero .et_pb_button_module_wrapper:has(> .mmd-btn-pair) { display: inline-block; margin: 0 14px 12px 0; }
@media (max-width: 767px) {
	.mmd-hero .et_pb_button_module_wrapper:has(> .mmd-btn-pair) { display: block; margin: 0 0 12px; }
	/* (the hero seal's phone rule was removed 2026-09-25: the seal moved to the About collage, which positions it at every width) */
}

/* Package cards: the from-price row sits at the foot of every card, so prices share one baseline across a row
   (the Wash and Wax summary is a line shorter than its neighbours) */
.mmd-site .et_pb_column:has(> .mmd-price-row) { display: flex; flex-direction: column; }
.mmd-site .et_pb_column > .mmd-price-row { margin-top: auto; }
/* the from-price and the prices link share one line */
.mmd-price-row p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mmd-price-row strong { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 0.5px; color: #1F2429; }

/* Links: teal with an underline on hover; the call card and footer lists keep their own colours */
.mmd-site #et-boc .et_pb_text a:hover { color: #9B111E; text-decoration: underline; }
.mmd-callcard a { color: #fff !important; text-decoration: none; }
.mmd-foot-links a:hover { color: #fff !important; }
.mmd-site .et_pb_text h3 a { color: inherit; }

/* The conversational form sits as a white card */
.mmd-form .ffc_conv_form, .mmd-form .ff_conv_app_frame { border-radius: 6px; }

/* Footer contact lines: the phone white, the email light grey (Divi's default link blue otherwise) */
.mmd-footer .et_pb_blurb a { color: #C9D1D6 !important; text-decoration: none; }
.mmd-footer .et_pb_blurb:last-of-type a, .mmd-footer .et_pb_blurb a[href^="tel:"] { color: #fff !important; }
.mmd-footer .et_pb_blurb a:hover { color: #FFFFFF !important; }   /* was the light red, which read orange (2026-09-25) */

/* Footer Pack V6 is a specialty section: after Divi's conversion its inner columns keep widths computed for the whole
   row (85px each inside a 700px column), so the inner rows share their width as flex rows instead. */
.mmd-footer .et_pb_row_inner { display: flex !important; column-gap: 24px; }
.mmd-footer .et_pb_row_inner > .et_pb_column { flex: 1 1 0; width: auto !important; margin-right: 0 !important; }
@media (max-width: 767px) {
	.mmd-footer .et_pb_row_inner { flex-wrap: wrap; row-gap: 20px; }
	.mmd-footer .et_pb_row_inner > .et_pb_column { flex: 1 1 calc(50% - 12px); }
}

/* s04: the source's absolute "Discover More" fitted beside the heading; the longer call button drops below it on
   tablet and phone */
@media (max-width: 980px) {
	.et_pb_button_module_wrapper:has(> .mmd-gallery-btn) { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
		transform: none !important; margin-top: 18px !important; text-align: left; }
}

/* Header strip (2026-09-25): round red Facebook and X buttons at the strip's left, on the
   logo's line, and the strip text right-aligned so it ends with the Call button. The strip's text spans the row's 90% and the
   logo row is 90% up to 1120px, so both offsets are half the difference, never below 0. X is a placeholder link until the
   account exists. Colour hover only. */
.mmd-strip { position: relative; }
.mmd-strip p { text-align: right !important; padding-right: max(0px, calc((100% - 1120px) / 2)); }
/* on desktop the Call button ends 24px inside the header row (measured at 1100 and 1440), so the text ends with it */
/* the Call button now ends at the header row's edge (the row's clearfix no longer takes a gap after it, 2026-09-30), so the
   strip text ends at the same edge */
@media (min-width: 981px) { .mmd-strip p { padding-right: max(0px, calc((100% - 1120px) / 2)); } }
.mmd-strip .mmd-strip-social { position: absolute; left: max(0px, calc((100% - 1120px) / 2)); top: 50%; margin-top: -13px; display: flex; gap: 8px; line-height: 0; }
.mmd-strip .mmd-strip-social a { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 4px; /* square with the button's 4px corners (Tony 2026-10-06: "change the social media icons from round icons to squarish icons"); was 50% */ background: #C8102E; transition: background-color .18s ease; }
.mmd-strip .mmd-strip-social a:hover, .mmd-strip .mmd-strip-social a:focus-visible { background: #9B111E; }
.mmd-strip .mmd-strip-social img { display: block; width: 14px; height: 14px; }

/* Google reviews (Widgets for Google Reviews, 2026-09-25) on the deep red reviews band: the
   widget's summary is dark text and the Google wordmark has red letters, so the widget sits on a white panel like the
   cards it replaced (the scaffold's white review cards), and every word of it takes the brand's Barlow (type gate). */
.mmd-google-reviews { background: #FFFFFF; border-radius: 12px; padding: 22px 22px 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.mmd-google-reviews .ti-widget, .mmd-google-reviews .ti-widget * { font-family: 'Barlow', Helvetica, Arial, sans-serif !important; }
.mmd-google-reviews .ti-widget .ti-name, .mmd-google-reviews .ti-widget .ti-rating-text strong { color: #1F2429 !important; }
@media (max-width: 767px) { .mmd-google-reviews { padding: 16px 12px 12px; } }

/* The Trusted since 1998 seal inside the 25+ card (Tony 2026-09-25): floated right beside "25+", sized to that line, with the
   caption running full width underneath, so the card reads "25+ [seal]" then "Years in business, since 1998". */
.mmd-years .mmd-years-seal { float: right; width: 78px; height: 78px; margin: -8px -6px 0 12px; }
.mmd-years p { clear: both; padding-top: 6px; }
@media (max-width: 767px) { .mmd-years .mmd-years-seal { width: 70px; height: 70px; } }

/* The 25 years badge in place of the white card (Tony's trial, 2026-09-25): the card's soft shadow, following the die-cut edge */
.mmd-years-badge img { filter: drop-shadow(0 10px 16px rgba(31, 36, 41, 0.18)); }

/* s04 "Our work" photo grid (atv-rental s03, Tony's swap 2026-09-29): the label link covers its whole tile and opens the
   photo (melvins.js shows it in the lightbox); a red focus ring for keyboard users. Divi's blurb content box is
   position:relative and 550px wide, so it lets go of the link's cover. */
.mmd-work-tile { position: relative; cursor: zoom-in; box-shadow: inset 0 -150px 110px -50px rgba(31, 36, 41, 0.62); }   /* the fade under the label */
.mmd-work-tile .et_pb_blurb_content, .mmd-work-tile .et_pb_blurb_container, .mmd-work-tile .et_pb_blurb_description { position: static !important; }
.mmd-work-tile a.mmd-lb { color: #FFFFFF !important; text-decoration: none; }
.mmd-work-tile a.mmd-lb::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.mmd-work-tile a.mmd-lb:focus-visible { outline: none; }
.mmd-work-tile:has(a.mmd-lb:focus-visible) { outline: 3px solid #C8102E; outline-offset: -3px; }

/* Below 981px Divi stacks every tile full width at the desktop's 479px, a 7,700px section at 768. Tablet keeps the desktop
   bento (quarters and a half, the source's 20px gutters) with shorter tiles; phone sets two photos across and the wide one
   under them (the source's rows reflowed), inside the page's 90% grid, 10px apart. */
@media (max-width: 980px) {
	.et_pb_row.mmd-work-row { display: flex !important; flex-wrap: nowrap; align-items: stretch; }
	.et_pb_row.mmd-work-row::before, .et_pb_row.mmd-work-row::after { display: none !important; }   /* the clearfix would be a flex item */
	.mmd-work-row > .et_pb_column { margin: 0 !important; }
	.mmd-work-row > .et_pb_column_1_4 { flex: 0 0 25%; width: 25% !important; }
	.mmd-work-row > .et_pb_column_1_2 { flex: 0 0 50%; width: 50% !important; }
	.mmd-work-row > .et_pb_column { display: flex; flex-direction: column; }
	/* Divi writes the tile's padding and margin as !important on one class, so these carry two */
	.et_pb_row.mmd-work-row .mmd-work-tile { flex: 1 1 auto; min-height: 290px; padding: 0 10px 28px !important; margin-bottom: 0 !important;
		display: flex; flex-direction: column; justify-content: flex-end; }
	.mmd-work-tile .et_pb_blurb_content { width: 100%; }
	.mmd-work-tile p { font-size: 22px !important; }
}
@media (max-width: 767px) {
	.et_pb_section .et_pb_row.mmd-work-row { flex-wrap: wrap; gap: 10px; width: 90% !important; max-width: 90% !important; margin: 0 auto 10px !important; }
	.et_pb_section .et_pb_row.mmd-work-row:last-child { margin-bottom: 0 !important; }
	.mmd-work-row > .et_pb_column_1_4 { flex: 0 0 calc(50% - 5px); width: calc(50% - 5px) !important; }
	.mmd-work-row > .et_pb_column_1_2 { flex: 0 0 100%; width: 100% !important; }
	.et_pb_row.mmd-work-row .mmd-work-tile { margin: 0 !important; min-height: 180px; padding: 0 8px 16px !important; }
	.mmd-work-tile p { font-size: 20px !important; }
}

/* "Load more images" (Tony 2026-09-29): with melvins.js the section is collapsible and rows 3 to 5 wait for the button; without
   it every row shows and the button row stays hidden */
.mmd-work-more-row { display: none !important; }
.mmd-work-collapsible .mmd-work-more-row { display: block !important; }
.mmd-work-collapsible:not(.mmd-work-open) .mmd-work-more { display: none !important; }
.mmd-work-collapsible:not(.mmd-work-open) .mmd-work-row:nth-child(3) { margin-bottom: 0 !important; }   /* row 2 ends the grid while closed */

/* The lightbox: the photo whole on a charcoal ground, the label and count under it, round white buttons; no motion */
.mmd-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(21, 25, 29, 0.94); display: flex; align-items: center; justify-content: center; padding: 64px 72px; }
.mmd-lightbox[hidden] { display: none; }
html.mmd-lightbox-open, html.mmd-lightbox-open body { overflow: hidden; }
.mmd-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.mmd-lightbox__img { display: block; max-width: min(1600px, 100%); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); width: auto; height: auto; border-radius: 4px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.mmd-lightbox__caption { display: flex; gap: 16px; align-items: baseline; margin-top: 14px; color: #FFFFFF; }
.mmd-lightbox__label { font-family: 'Bebas Neue', Helvetica, Arial, sans-serif; font-size: 26px; letter-spacing: 1px; line-height: 1.1; }
.mmd-lightbox__count { font-family: 'Barlow', Helvetica, Arial, sans-serif; font-size: 15px; color: #C9D1D6; }
.mmd-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	background: #FFFFFF; color: #1F2429; font: 400 34px/1 'Barlow', Helvetica, Arial, sans-serif; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.mmd-lightbox__btn:hover { background: #C8102E; color: #FFFFFF; }
.mmd-lightbox__btn:focus-visible { outline: 3px solid #C8102E; outline-offset: 3px; }
.mmd-lightbox__close { top: 16px; right: 16px; }
.mmd-lightbox__prev { left: 12px; top: 50%; margin-top: -24px; }
.mmd-lightbox__next { right: 12px; top: 50%; margin-top: -24px; }
@media (max-width: 767px) {
	.mmd-lightbox { padding: 64px 12px 88px; }
	.mmd-lightbox__img { max-height: calc(100dvh - 190px); }
	.mmd-lightbox__prev, .mmd-lightbox__next { top: auto; bottom: 20px; margin-top: 0; }
	.mmd-lightbox__prev { left: calc(50% - 60px); }
	.mmd-lightbox__next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { .mmd-lightbox__btn { transition: none; } }

/* Menu on one line, with a pill rollover (Tony 2026-09-30: "some navigation buttons that are
   wrapping, so I'd like to fix that ... add a similar rollover state ... Let's use the rollover color, the shade of red";
   then: "I want it to be #c80f2d can we also make the font on the navigation a bit bigger, we will need to make some space
   by moving the logo the left a bit more"). Six items (Home, About, Services and Pricing, Service Area, Power Washing,
   Contact) at 17px Barlow 600 with 8px pills need 622px. From 1280px the logo (and the strip's Facebook and X buttons,
   which line up with it) sits 48px left of the 1120px content edge, which leaves the menu 642px, so it is on one line;
   at 1280 the logo is still about 24px from the screen edge. From 981 to 1279px the menu takes its own centred line under
   the logo and the Call button instead of wrapping; phones keep the hamburger. The rollover is a filled pill in #C80F2D
   with white text, colour only. The Call button keeps the one button spec. */
/* the row's clearfix pseudo-elements are flex items in this flexed row: with the items reordered they come first and
   push the logo one gap to the right, off the strip's Facebook and X buttons */
.mmd-head-main::before, .mmd-head-main::after { display: none !important; }
@media (min-width: 981px) {
	.mmd-head-main { column-gap: 16px; }
	.mmd-head-nav .et_pb_menu .et_pb_menu__menu > nav > ul, .mmd-head-nav .et_pb_menu ul.et-menu { flex-wrap: nowrap !important; justify-content: flex-end; gap: 3px; }
	.mmd-head-nav .et_pb_menu ul.et-menu > li { padding: 0 !important; margin: 0 !important; }
	.mmd-head-nav .et_pb_menu ul.et-menu > li > a { font-size: 17px !important; padding: 8px 8px !important; border-radius: 6px; white-space: nowrap; opacity: 1 !important;
		transition: background-color 0.18s ease, color 0.18s ease; }
	.mmd-head-nav .et_pb_menu ul.et-menu > li > a:hover, .mmd-head-nav .et_pb_menu ul.et-menu > li > a:focus-visible { background-color: #C80F2D; color: #FFFFFF !important; }
}
@media (min-width: 1280px) {
	.mmd-head-main > .mmd-head-logo { margin-left: -48px !important; }
	.mmd-strip .mmd-strip-social { left: calc(max(0px, (100% - 1120px) / 2) - 48px); }
}
@media (min-width: 981px) and (max-width: 1279px) {
	.mmd-head-main { flex-wrap: wrap !important; row-gap: 4px; }
	.mmd-head-logo { order: 1; flex: 1 1 auto; }
	.mmd-head-cta { order: 2; }
	.mmd-head-nav { order: 3; flex: 1 0 100%; }
	.mmd-head-nav .et_pb_menu .et_pb_menu__menu > nav > ul, .mmd-head-nav .et_pb_menu ul.et-menu { justify-content: center; }
	/* the menu module right-aligns its inner containers for the one-line header; on its own line it centres */
	.mmd-head-nav .et_pb_menu .et_pb_menu_inner_container, .mmd-head-nav .et_pb_menu .et_pb_menu__wrap, .mmd-head-nav .et_pb_menu .et_pb_menu__menu { justify-content: center !important; }
	.mmd-head-nav .et_pb_menu .et_pb_menu__wrap { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .mmd-head-nav .et_pb_menu ul.et-menu > li > a { transition: none; } }

/* Footer contact photo on phones (2026-09-30, found on the About build): the module keeps the homepage's fixed 490px
   width, so on a 375 to 430px phone the Tahoe ran off the right edge (clipped by body overflow). Below 981px it takes
   the column width instead, up to the same 490px. */
@media (max-width: 980px) {
	#contact .et_pb_column:first-child .et_pb_image { width: 100% !important; max-width: 490px !important; }   /* the photo column only: the */
	#contact .et_pb_column:first-child .et_pb_image .et_pb_image_wrap, #contact .et_pb_column:first-child .et_pb_image img { width: 100% !important; }   /* form column's icon keeps 40px */
}

/* Services and Pricing packages (2026-10-01, kit builder mmd_native_packages): title with the anchor the homepage's
   "See prices" links use, the six size prices as a two-column list, then what is included. Brand scale only. */
.mmd-pkg-title { font-family: 'Bebas Neue', sans-serif !important; font-size: 26px !important; line-height: 1.15 !important; letter-spacing: 0.5px; color: #1F2429 !important; margin: 0 0 14px !important; padding: 0 !important; scroll-margin-top: 150px; }
.mmd-prices { list-style: none !important; margin: 0 0 18px !important; padding: 0 !important; border-top: 1px solid #E3E8EC; }
.mmd-prices li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 !important; border-bottom: 1px solid #E3E8EC; font-size: 16px; line-height: 1.35; }
.mmd-prices li::before { display: none !important; }
.mmd-prices li span { color: #5E6A71; }
.mmd-prices li b { font-weight: 700; color: #C8102E; white-space: nowrap; }
.mmd-pkg-inc { font-size: 16px !important; line-height: 1.55 !important; margin: 0 !important; padding: 0 !important; }
.mmd-pkg-extra { font-size: 16px !important; margin: 10px 0 0 !important; padding: 0 !important; font-weight: 600; color: #1F2429; }
.mmd-pkg-note { font-size: 17px !important; margin: 0 0 22px !important; padding: 0 !important; }
.mmd-addons { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.mmd-addons li { font-size: 16px; line-height: 1.5; padding: 0 !important; }
.mmd-addons li::before { display: none !important; }
.mmd-addons li b { color: #1F2429; }
@media (max-width: 767px) { .mmd-addons { grid-template-columns: 1fr; } }

/* Inner-page mini hero titles break into balanced lines ("Serving the Washington / Metro Area", not a lone "Area"). */
body:not(.home) #top h1 { text-wrap: balance; }

/* Blog cards (2026-10-01): "read more" in the site's uppercase link style; card photos a steady 3:2 */
.mmd-blog-grid .more-link { display: inline-block; margin-top: 6px; font-size: 14px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #C8102E !important; }
.mmd-blog-grid .more-link:hover { color: #9B111E !important; }
.mmd-blog-grid .et_pb_image_container img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.mmd-article img { border-radius: 6px; height: auto; }

/* Blog articles: Rank Math's FAQ block (visible questions that also feed the FAQ schema) spaced like the rest of the article */
.mmd-article .rank-math-block { margin: 6px 0 28px; }
.mmd-article .rank-math-list { margin: 0 !important; padding: 0 !important; }
.mmd-article .rank-math-list-item { padding: 16px 0 !important; border-bottom: 1px solid #E3E8EC; }
.mmd-article .rank-math-list-item:first-child { border-top: 1px solid #E3E8EC; }
.mmd-article .rank-math-question { margin: 0 0 6px !important; padding: 0 !important; }
.mmd-article .rank-math-answer p { margin: 0 !important; padding: 0 !important; }

/* PageSpeed (2026-10-01): with JavaScript on (html.bys-js, set in the head by the performance layer), the gallery's
   "Load more" rows are collapsed from the first paint, so their nine photos download only when someone opens them
   (before, the rows rendered until the script collapsed them, and all fifteen photos downloaded on every visit). */
.bys-js .mmd-work-more-row { display: block !important; }
.bys-js .et_pb_section:not(.mmd-work-open) .mmd-work-more { display: none !important; }
.bys-js .et_pb_section:not(.mmd-work-open) .mmd-work-row:nth-child(3) { margin-bottom: 0 !important; }

/* Call us card (footer): the two numbers carry their ledger labels, Office and Mobile (2026-10-06) */
.mmd-call-label { font-size: 14px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.85; margin-right: 4px; }

/* FAQ questions in the ink colour: Divi's toggle default is #666, which read as light grey (2026-10-06) */
.mmd-site .et_pb_toggle .et_pb_toggle_title { color: #1F2429 !important; }

/* Quote form on phones (2026-10-06, Grok's critique): the sticky call bar hides while the form is on screen (melvins.js sets
   body.mmd-form-in-view), and an answer list of six or more goes two across, so the service question (eight answers) fits a
   phone screen; Fluent's conversational form turns a swipe into the next question, so the question itself has to fit. */
@media (max-width: 767px) {
	body.mmd-form-in-view .mmd-callbar-row { display: none !important; }
	.mmd-site .ff_conv_app .f-radios-wrap ul.f-radios:has(> li:nth-child(6)) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.mmd-site .ff_conv_app .f-radios-wrap ul.f-radios:has(> li:nth-child(6)) > li { margin: 0 !important; width: auto !important; min-width: 0 !important; }
}

/* Services and Pricing: the compare table below the package cards (2026-10-06, Tony: "Add the comparison table below the
   cards"; exports/mmd-kit-native.php, mmdn_compare). Real table markup in a scrolling region: on phones the table keeps its
   columns and scrolls inside its own frame (the page never scrolls sideways) while the vehicle-size column stays put. */
.mmd-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; background: #FFFFFF; border-radius: 4px; box-shadow: 0 10px 30px rgba(31, 36, 41, 0.08); margin-top: 18px; }
.mmd-compare:focus-visible { outline: 2px solid #C8102E; outline-offset: 3px; }
.mmd-compare table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; margin: 0; border: 0; font-family: 'Barlow', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.4em; color: #1F2429; }
.mmd-compare th, .mmd-compare td { padding: 14px 16px; text-align: center; border: 0; border-bottom: 1px solid rgba(31, 36, 41, 0.1); vertical-align: middle; background: #FFFFFF; }
.mmd-compare thead th { background: #1F2429; color: #FFFFFF; font-family: 'Bebas Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 19px; letter-spacing: 0.5px; line-height: 1.15em; }
.mmd-compare thead th a { color: #FFFFFF !important; text-decoration: none; }
.mmd-compare thead th a:hover, .mmd-compare thead th a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mmd-compare tbody th { text-align: left; font-weight: 600; width: 27%; }
@media (min-width: 981px) { .mmd-compare tbody th { white-space: nowrap; } }
.mmd-compare tbody td { font-weight: 600; }
.mmd-compare tbody tr:nth-child(even) th, .mmd-compare tbody tr:nth-child(even) td { background: #F4F7F9; }
.mmd-compare tbody tr:last-child th, .mmd-compare tbody tr:last-child td { border-bottom: 0; }
.mmd-compare thead th:first-child, .mmd-compare tbody th { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 rgba(31, 36, 41, 0.1); }
@media (max-width: 767px) {   /* phones: a narrower size column leaves room for the prices beside it */
	.mmd-compare table { min-width: 700px; font-size: 16px; }
	.mmd-compare tbody th { width: 140px; min-width: 140px; }
	.mmd-compare th, .mmd-compare td { padding: 12px 12px; }
}

/* PROSE (2026-10-11, the Privacy Policy, kit builder mmd_native_prose): paragraphs and lists inside one block keep the reading
   rhythm the blog article has, and links read as links (brand red, underlined) */
.mmd-prose p { padding-bottom: 1em; }
.mmd-prose p:last-child { padding-bottom: 0; }
.mmd-prose ul { margin: 0 0 1em; padding-left: 1.2em; }
.mmd-prose ul:last-child { margin-bottom: 0; }
.mmd-prose li { margin-bottom: 0.35em; }
.et_pb_text.mmd-prose .et_pb_text_inner a { color: #C8102E; text-decoration: underline; text-underline-offset: 2px; } /* beats the module's own link colour */
.et_pb_text.mmd-prose .et_pb_text_inner a:hover { color: #9B111E; }