/* Page shell for the Senmos pricing page - Pay As You Go and PRO side by side.

   External file on purpose: WordPress runs wpautop over post_content and injects
   </p><p> INSIDE inline <style> blocks, which corrupts the first rule and kills
   the whole sheet.

   The shell repeats prisberegner-page.css rather than sharing it, because that
   sheet is live on the calculator page and this one has to be free to change
   while these pages are still drafts. Fold them together once both are live. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap');

.snmpr {
	--pr-ink: #1c2430;
	--pr-brand: #1BAAEC;
	--pr-muted: #586473;
	--pr-line: #e6ebf2;
	--pr-quiet: #8a97a8;
	/* The calculator's own panel colour, so the two tabs read as one page. */
	--pr-surface: rgba(255, 255, 255, 0.85);
	width: 100%;
	position: relative;
	background: #2f6fb5 url('/wp-content/uploads/2022/11/Gradient-senmos.jpg') center center / cover no-repeat;
}

.snmpr * { box-sizing: border-box; }
.snmpr p:empty { display: none !important; }

/* wpautop wraps the leading comment and the asset tags in bare <p> tags; one
   sitting above the section reads as a gap under the nav bar. Everything the
   page renders lives inside .snmpr-wrap, so nothing real is hidden here. */
.snmpr > p { display: none !important; }
.snmpr img { max-width: 100%; }

/* 1248 minus 48px of padding is 1200 - the width the calculator widget was
   measured at. Narrower and its two-column layout stops matching. */
.snmpr-wrap {
	max-width: 1248px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.snmpr-head { padding-top: 70px; }

/* Clear space under the cards before the band's colour changes. The middle card
   hangs 22px lower than its neighbours, so it keeps 74px of that. */
.snmpr-body { padding-bottom: 96px; }

/* The footnote band runs the full width of the page - which is why it is a
   sibling of .snmpr-wrap rather than a child. It carries the integrations
   pages' background: #eef3f8 under the shared four-way-split gradient, flipped,
   exactly as build_provider.py sets it. */
.snmpr-help {
	position: relative;
	overflow: hidden;
	padding: 76px 0 88px;
	background: #eef3f8;
}

/* Absolute, not fixed: fixed is what the integrations pages use, but there the
   whole page is inside the section. Here it would paint over the site header
   and footer. */
.snmpr-help::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: url('/wp-content/uploads/2024/01/BG-gradient-4-way-split-v5-scaled.jpg') center bottom / cover;
	transform: scaleY(-1);
}

.snmpr-help .snmpr-wrap {
	position: relative;
	z-index: 1;
}

.snmpr h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
	font-size: clamp(28px, 4.4vw, 46px);
	color: #fff;
	margin: 0 0 22px;
}

.snmpr-lead {
	max-width: 62ch;
	margin: 0 auto 40px;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(16px, 1.7vw, 19px);
	line-height: 1.6;
}

/* ---- the Pay As You Go / PRO switch ---- */

.snmpr-tabs {
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin: 0 auto 38px;
	padding: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.16);
}

/* Scoped past the theme, which styles bare `button` with its own padding,
   border and background - the same specificity fight price-check.css documents
   for input[type="number"]. */
.snmpr .snmpr-tab {
	min-width: 190px;
	margin: 0;
	padding: 11px 22px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.snmpr .snmpr-tab[aria-selected="true"] {
	background: #fff;
	color: var(--pr-ink);
}

.snmpr .snmpr-tab:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.snmpr-panel[hidden] { display: none; }

.snmpr-calc { display: flex; justify-content: center; }

/* ---- dynamic sensors switch, above the PRO cards ---- */

/* Block, not a flex row: as flex items the note's max-width clamps its flex base
   size, so it fits beside the switch instead of wrapping under it. */
.snmpr-dyn {
	margin: 0 auto 44px;
	text-align: center;
}

.snmpr-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

/* The native checkbox stays in the accessibility tree and keeps keyboard
   behaviour; the track and knob are drawn from it. */
.snmpr .snmpr-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
}

.snmpr-track {
	position: relative;
	flex: none;
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.32);
	transition: background 0.15s ease;
}

.snmpr-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.snmpr-switch input:checked + .snmpr-track { background: var(--pr-brand); }
.snmpr-switch input:checked + .snmpr-track::after { transform: translateX(20px); }
.snmpr-switch input:focus-visible + .snmpr-track { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- PRO cards ---- */

.snmpr-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

/* Each card carries its own hue in four variables, so the ribbon, disc, ticks,
   saving pill and button all follow from one place. The outer tiers take the
   brand blue; the middle takes the brand green, which is the same gradient the
   site's primary button uses. */
.snmpr-card {
	--card-grad: linear-gradient(130deg, #1BAAEC, #406CBA);
	--card-solid: #1BAAEC;
	--card-tint: rgba(27, 170, 236, 0.14);
	--card-deep: #0d7cb0;

	/* overflow:hidden is what turns the rotated banner into a corner ribbon: the
	   card's rounded rectangle does the clipping, so the ribbon needs no folded
	   tails of its own. */
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 34px 26px 30px;
	border-radius: 0;
	background: var(--pr-surface);
	color: var(--pr-ink);
	text-align: center;
}

/* The middle tier stands taller than its neighbours. The negative margin is what
   makes it protrude at both ends: the grid stretches every card to the row
   height, so this one grows past it by 22px each way. */
.snmpr-card--featured {
	--card-grad: linear-gradient(109deg, #6CD897, #56B4B1);
	--card-solid: #56B4B1;
	--card-tint: rgba(86, 180, 177, 0.18);
	--card-deep: #2c8481;

	margin: -22px 0;
	/* 34 plus the 22px this card gains at the top, so its heading still sits
	   level with its neighbours'. */
	padding-top: 56px;
	/* Fully opaque against its translucent neighbours: with the calculator's
	   flat panels there is no shadow to lift this card, so the surface does it. */
	background: #fff;
}

/* Only the middle tier wears a ribbon, and it says why it is the middle tier -
   the tier names are headings inside the cards. */
.snmpr-ribbon {
	position: absolute;
	/* The card's corner clips the band, so only the middle of it is ever on
	   screen. Sitting further out widens that window: at this offset about
	   126px of band shows, which holds the longest label the page uses. */
	top: 32px;
	left: -52px;
	width: 190px;
	margin: 0;
	padding: 6px 0;
	transform: rotate(-45deg);
	background: var(--card-grad);
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
}

.snmpr-name {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 4px;
	color: var(--pr-ink);
}

.snmpr-limits {
	margin: 0 0 18px;
	color: var(--pr-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* The price carries the card's colour itself. --card-deep rather than the
   lighter --card-solid: the solid tone reads at 2.5:1 against white, which is
   under the 3:1 large text needs. */
.snmpr-price {
	display: block;
	margin-bottom: 4px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 3.1vw, 40px);
	line-height: 1.1;
	color: var(--card-deep);
}

.snmpr-per {
	display: block;
	color: var(--pr-muted);
	font-size: 14px;
	font-weight: 600;
}

.snmpr-eq {
	display: block;
	margin-top: 2px;
	color: var(--pr-quiet);
	font-size: 13px;
}

.snmpr-save {
	display: inline-block;
	align-self: center;
	margin: 16px 0 20px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--card-tint);
	color: var(--card-deep);
	font-size: 13px;
	font-weight: 700;
}

/* Both price sets ship in the markup; the switch decides which one shows. That
   keeps the swap instant and puts no arithmetic in the browser. */
.snmpr-cards[data-dynamic="off"] .snmpr-figure--dynamic,
.snmpr-cards[data-dynamic="on"] .snmpr-figure--static { display: none; }

/* inline-block so the list centres as a block while its rows stay left-read. */
.snmpr-feat {
	flex: 1 1 auto;
	display: inline-block;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	text-align: left;
}

.snmpr-feat li {
	position: relative;
	margin: 0 0 11px;
	padding-left: 28px;
	font-size: 14px;
	line-height: 1.5;
}

.snmpr-feat li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--card-tint);
}

.snmpr-feat li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 5px;
	width: 4px;
	height: 8px;
	border: solid var(--card-solid);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.snmpr .snmpr-cta {
	display: block;
	margin-top: auto;
	padding: 13px 20px;
	border: 0;
	border-radius: 4px;
	background: var(--card-grad);
	box-shadow: 0 3px 11px rgba(0, 0, 0, 0.18);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.snmpr .snmpr-cta:hover,
.snmpr .snmpr-cta:focus {
	filter: brightness(1.08);
	color: #fff;
}

/* ---- the footnotes themselves ---- */

/* No panel of their own - the band behind them is the background. */
.snmpr-notes,
.snmpr-foot {
	margin: 0;
	padding: 0;
	color: var(--pr-muted);
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

.snmpr-notes {
	max-width: none;
	list-style: none;
}

/* The panel runs the full width; the text does not. Without this a footnote
   reads as a single 150-character line. */
.snmpr-notes li {
	max-width: 92ch;
	margin: 0 auto 12px;
}

.snmpr-notes li:last-child { margin-bottom: 0; }

.snmpr-foot {
	max-width: none;
	font-size: 15px;
}

.snmpr-notes a,
.snmpr-foot a {
	color: var(--pr-brand);
	text-decoration: underline;
}

@media (max-width: 900px) {
	.snmpr-cards { grid-template-columns: minmax(0, 1fr); }
	/* Stacked, the protrusion would just overlap the card above. */
	.snmpr-card--featured { margin: 0; }
}

@media (max-width: 520px) {
	.snmpr-wrap { padding: 44px 18px 64px; }
	.snmpr .snmpr-tab { min-width: 0; padding: 10px 14px; font-size: 14px; }
}