/* Panel Cleaning page: only what NR's own Elementor classes don't cover.
   Colours and type come from the kit variables in post-10.css. */

.pc-hero { background-size: cover; background-position: center 65%; background-repeat: no-repeat; }
/* Flat overlay replaces the homepage hero gradient. 0.55 keeps white text >= 4.5:1 even over pure-white pixels. */
.pc-page .elementor-element.elementor-element-6317377.pc-hero > .elementor-background-overlay {
	background-image: none; background-color: rgba(0, 0, 0, .55); opacity: 1;
}
/* Desktop: drop the 20% right margin inherited from the homepage widget. The sub line
   (538.6px) fits the column from 1101px, so it is held to one line there; at
   1025-1100px it wraps to two lines inside the column at full size. */
@media (min-width: 1025px) {
	.pc-page .elementor-element.elementor-element-42db9a8d > .elementor-widget-container { margin-right: 0; }
}
@media (min-width: 1101px) {
	.pc-page .elementor-element.elementor-element-42db9a8d p { white-space: nowrap; }
}

/* One padding per breakpoint for sections B to G. Side insets (with the 10px column padding)
   put content 20px from the edge on tablet and mobile, matching the header and hero. Content
   width matches the header and hero containers (1170px). */
.pc-section { padding: 90px 0; }
.pc-section > .elementor-container { max-width: 1170px; }
.pc-section > .elementor-container + .elementor-container { margin-top: 10px; }
.pc-section-title { text-align: center; }
.pc-section-title .elementor-heading-title { margin-bottom: 20px; }

/* Card rows (B, C, D): the card sits inside the column wrapper, so Elementor's 10px column
   padding stays as the gutter; the wrapper stacks vertically so every card fills the row height. */
.pc-cards .elementor-widget-wrap { flex-direction: column; flex-wrap: nowrap; }
.pc-cards .pc-tile, .pc-cards .pc-card { flex: 1; }

/* Section B tiles */
.pc-tile {
	border-top: 4px solid var(--e-global-color-accent);
	background: var(--e-global-color-06a34e7);
	box-shadow: 0 10px 30px rgba(24, 28, 40, .06);
	border-radius: 5px;
	padding: 30px;
}

.pc-tile .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Cards (C and D) */
.pc-card {
	background: var(--e-global-color-06a34e7);
	border: 1px solid var(--e-global-color-f01b239);
	border-radius: 10px;
	padding: 40px 30px;
}
.pc-compare { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pc-compare__label { margin: 0 0 10px; }
.pc-compare__figure {
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-size: var(--e-global-typography-primary-font-size);
	font-weight: var(--e-global-typography-primary-font-weight);
	line-height: var(--e-global-typography-primary-line-height);
	color: var(--e-global-color-primary); margin: 0 0 10px;
}
.pc-compare--after .pc-compare__figure { color: var(--e-global-color-accent); }
.pc-flag {
	font-family: var(--e-global-typography-f882794-font-family), Sans-serif;
	font-size: var(--e-global-typography-f882794-font-size);
	font-style: italic; color: var(--e-global-color-text); margin: 0;
}

/* Section D plans: small print below each card */
.pc-plan { display: flex; flex-direction: column; text-align: center; }
.pc-plan__name { margin: 0 0 6px; }
.pc-plan__cleans { margin: 0 0 20px; }
.pc-plan__price {
	font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
	font-size: var(--e-global-typography-secondary-font-size);
	font-weight: var(--e-global-typography-secondary-font-weight);
	line-height: 1; color: var(--e-global-color-primary); margin: 0 0 10px;
}
.pc-plan__price span {
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight); color: var(--e-global-color-text);
}
.pc-plan__save { color: var(--e-global-color-accent); font-weight: 500; margin: 0 0 25px; }
.pc-plan__ticks { text-align: left; margin: 0 auto 30px; }
.pc-plan__ticks .elementor-icon-list-item { padding: 5px 0; }
.pc-plan__ticks .elementor-icon-list-icon svg { fill: var(--e-global-color-accent); width: 14px; height: 14px; margin-right: 10px; }
.pc-plan__cta { margin-top: auto; }
.pc-plan__smallprint { text-align: center; margin-top: 10px; }
/* Tablet: three plan cards are too narrow for the button text, so two per row, third centred.
   Elementor already wraps section containers at 1024px and below. */
@media (min-width: 768px) and (max-width: 1024px) {
	.pc-plans .pc-cards { justify-content: center; }
	.pc-plans .pc-cards > .elementor-column.elementor-col-33 { width: 50%; }
}

/* Section E (#pc-how) and Section F (#pc-faq) use the same section, container and column markup
   as Sections B and C, so widths, gutters, padding and mobile stacking come from those same rules.
   Only the items inside the columns are styled here. */
.pc-how-item { text-align: center; }
.pc-how-num {
	display: inline-block; width: 56px; height: 56px; line-height: 56px; border-radius: 50%;
	background: var(--e-global-color-accent); color: var(--e-global-color-06a34e7);
	font-family: var(--e-global-typography-a1d69c8-font-family), Sans-serif;
	font-size: var(--e-global-typography-a1d69c8-font-size);
	font-weight: var(--e-global-typography-a1d69c8-font-weight);
	margin-bottom: 18px;
}
.pc-how-item h4 { margin: 0; }

.pc-faq-item { text-align: center; }
.pc-faq-item + .pc-faq-item { margin-top: 28px; }
.pc-faq-item h4 { margin: 0 0 8px; }
.pc-faq-item p { margin: 0; }

/* Section G CTA */
.pc-cta { position: relative; background-size: cover; background-position: center; text-align: center; }
.pc-cta > .elementor-background-overlay { background-color: var(--e-global-color-primary); opacity: .82; }
.pc-cta .elementor-widget-wrap { flex-direction: column; align-items: center; }
.pc-cta h2.elementor-heading-title { color: var(--e-global-color-06a34e7); }
.pc-cta__phone { margin: 10px 0 0; }
.pc-cta__phone a {
	color: var(--e-global-color-06a34e7);
	font-family: var(--e-global-typography-8966ad4-font-family), Sans-serif;
	font-size: var(--e-global-typography-8966ad4-font-size);
	font-weight: var(--e-global-typography-8966ad4-font-weight);
}
.pc-cta__phone svg { fill: var(--e-global-color-accent); width: 18px; height: 18px; margin-right: 10px; vertical-align: -2px; }

/* Checkout mockup panel */
.pc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pc-modal[hidden] { display: none; }
.pc-modal__backdrop { position: absolute; inset: 0; background: rgba(24, 28, 40, .6); }
.pc-modal__panel {
	position: relative; width: 100%; max-width: 440px;
	background: var(--e-global-color-06a34e7); border-radius: 10px; padding: 40px 30px 30px;
}
/* Two-class selectors outrank the kit's ".elementor-kit-10 button" rules, including :hover */
.pc-modal .pc-modal__close, .pc-modal .pc-modal__close:hover, .pc-modal .pc-modal__close:focus {
	position: absolute; top: 10px; right: 10px; padding: 4px 12px;
	background: transparent; color: var(--e-global-color-primary);
	font-size: var(--e-global-typography-274f2d8-font-size); line-height: 1;
}
.pc-modal__plan { margin: 0 0 6px; }
.pc-modal .pc-flag { margin-bottom: 18px; }
.pc-billing { border: 0; padding: 0; margin: 0 0 6px; display: flex; gap: 24px; }
.pc-billing label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pc-billing input { width: auto; margin: 0; }
.pc-modal__amount {
	font-family: var(--e-global-typography-274f2d8-font-family), Sans-serif;
	font-size: var(--e-global-typography-274f2d8-font-size);
	font-weight: var(--e-global-typography-274f2d8-font-weight); color: var(--e-global-color-primary); margin: 0;
}
.pc-modal__yearly { font-size: var(--e-global-typography-f882794-font-size); color: var(--e-global-color-text); margin: 2px 0 0; }
.pc-modal .pc-modal__smallprint { margin-bottom: 14px; }
.pc-form input { width: 100%; margin-bottom: 6px; }
.pc-form button { width: 100%; margin-top: 14px; }
.pc-thanks { color: var(--e-global-color-accent); font-weight: 600; margin: 10px 0 0; }

@media (max-width: 1024px) {
	.pc-section { padding: 70px 10px; }
}
@media (max-width: 767px) {
	.pc-section { padding: 56px 10px; }
}