/* ==========================================================================
   Pre-Consultation Report — public funnel
   One palette, shared by the CTA, the wizard, the preview, the paywall and
   the report (mirrored 1:1 by the PDF writer in includes/class-pcr-pdf.php).

   Mobile-first. The base sheet is written for a 360px phone; columns are
   added at 600px, 900px and 1200px. Every rule is scoped under `.pcr` (or
   `.pcr-standalone`) and preceded by a defensive reset, so an active theme
   cannot pull the layout apart.

   Contents
     01 Tokens
     02 Defensive reset
     03 Wrapper / screens
     04 Buttons
     05 Stepper
     06 Step panels + field grid
     07 Controls
     08 Repeater
     09 Consent
     10 Navigation
     11 CTA block
     12 Preview + paywall
     13 Report document
     14 Success
     15 Feedback (toast / busy)
     16 ≥600px
     17 ≥900px
     18 ≥1200px
   ========================================================================== */

/* ============================================================== 01 Tokens == */

.pcr.pcr,
.pcr-standalone.pcr-standalone {
	--pcr-ink: #0b2239;
	--pcr-primary: #0d6e8c;
	--pcr-primary-dark: #0a5870;
	--pcr-primary-light: #e7f1f5;
	--pcr-accent: #12a594;
	--pcr-accent-light: #e4f5f2;
	--pcr-warn: #b26a00;
	--pcr-warn-light: #fdf3e3;
	--pcr-danger: #b32d2b;
	--pcr-danger-light: #fbedec;
	--pcr-bg: #f4f8fa;
	--pcr-surface: #ffffff;
	--pcr-border: #d9e5ec;
	--pcr-text: #1b3446;
	--pcr-muted: #5b7386;

	--pcr-radius: 14px;
	--pcr-radius-sm: 9px;
	--pcr-shadow: 0 1px 2px rgba(11, 34, 57, .06), 0 8px 24px -12px rgba(11, 34, 57, .18);
	--pcr-shadow-lg: 0 2px 4px rgba(11, 34, 57, .07), 0 24px 56px -20px rgba(11, 34, 57, .3);

	/* Spacing scale — relative units, so everything scales with the user font. */
	--pcr-pad: clamp(0.875rem, 0.55rem + 1.4vw, 1.75rem);
	--pcr-gap: clamp(0.875rem, 0.62rem + 1.1vw, 1.375rem);
	--pcr-gap-sm: 0.3125rem;
	--pcr-control: 48px;

	/* Control-box metrics, held in variables rather than repeated. The pinned
	   floor of section 03 has to restate several of them with `!important`,
	   and a second copy that drifts from the first is a silent bug. */
	--pcr-edge: 1.5px;
	--pcr-pad-control-block: .75rem;
	--pcr-pad-control-inline: .8125rem;
	--pcr-pad-btn-block: .8125rem;
	--pcr-pad-btn-inline: 1.25rem;
	/* 16px minimum is what stops iOS zooming on focus. */
	--pcr-font-control: max(1rem, 16px);

	color: var(--pcr-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

/* ======================================================== 02 Defensive reset */

.pcr.pcr :where(*),
.pcr.pcr :where(*::before),
.pcr.pcr :where(*::after),
.pcr-standalone.pcr-standalone :where(*),
.pcr-standalone.pcr-standalone :where(*::before),
.pcr-standalone.pcr-standalone :where(*::after) {
	box-sizing: border-box;
}

/* The theme styles its own content by element name (`p { margin-bottom: 2em }`,
   `.entry-content ul { padding-left: 40px }`). Neutralise that on the elements
   the plugin owns — but ONLY on elements that carry no class, so this never
   competes with the component rules further down. `.pcr` + `:not([class])`
   resolves to (0,3,0), which outranks any `body .entry-content p` style. */
.pcr.pcr :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, blockquote,
	pre, figure, figcaption, form, fieldset, legend, table, thead, tbody, tfoot,
	tr, th, td, abbr, address, small, strong, em, b, i):not([class]),
.pcr-standalone.pcr-standalone :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, blockquote,
	pre, figure, figcaption, form, fieldset, legend, table, thead, tbody, tfoot,
	tr, th, td, abbr, address, small, strong, em, b, i):not([class]) {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	list-style: none !important;
	text-indent: 0;
}

.pcr.pcr :where(h1, h2, h3, h4, h5, h6):not([class]),
.pcr-standalone.pcr-standalone :where(h1, h2, h3, h4, h5, h6):not([class]) {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-align: inherit;
	color: inherit;
	background: none;
}

/* Form controls: 16px minimum is what stops iOS zooming on focus. These sit at
   (0,2,0); every control component below re-asserts itself at (0,3,0). */
.pcr.pcr :where(input, select, textarea, button),
.pcr-standalone.pcr-standalone :where(input, select, textarea, button) {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: inherit;
	font-size: var(--pcr-font-control);
	font-weight: inherit;
	line-height: 1.4;
	color: var(--pcr-text);
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	background-image: none;
	border-radius: var(--pcr-radius-sm);
	max-width: 100%;
	accent-color: var(--pcr-primary);
}

.pcr.pcr :where(img, svg, video, canvas, iframe),
.pcr-standalone.pcr-standalone :where(img, svg, video, canvas, iframe) {
	max-width: 100%;
	height: auto;
}

/* ================================================== 03 Specificity & pinned floor
 *
 * A theme styles its own content by element and attribute, and it wins:
 * `body .entry-content input[type="text"]` is (0,2,2) and
 * `body .entry-content label` is (0,1,2) with a `float: left; width: 40%`.
 * Against an unscoped `.pcr .pcr-label` the result is exactly what this
 * stylesheet exists to prevent: floated labels, inputs with no border and a
 * background image, help texts out of their field.
 *
 * Two mechanisms, both scoped to the wrapper:
 *
 *   1. A uniform specificity floor. Every selector in this file is written
 *      `.pcr.pcr …` / `.pcr-standalone.pcr-standalone …`, i.e. (0,3,0). The
 *      class is repeated on purpose and the repetition is uniform, so the
 *      order between plugin rules is untouched — every @media override still
 *      wins over the base rule it refines — while an element+attribute theme
 *      rule falls behind. Do not "tidy" these selectors back to a single
 *      class: the whole point is the second one.
 *   2. The declarations no component ever varies are pinned below with
 *      `!important`, because specificity from outside is unbounded. They live
 *      in this one block for that reason: everywhere else in this file is
 *      `!important`-free. Which property is pinned is a deliberate, narrow
 *      decision — each comment says what stayed out and why. Only a theme
 *      that is itself written with `!important` can beat this block.
 */

/* (1) A floated child is out of flow: inside the flex column of a field it
   lands beside the control instead of above it. Nothing inside the widget is
   ever floated, so this can be pinned for the whole subtree. */
.pcr.pcr :where(*),
.pcr-standalone.pcr-standalone :where(*) {
	float: none !important;
	clear: none !important;
}

/* (2) content-box plus a theme width of 130% is what turns a grid into a
   sideways-scrolling page. Neither is ever wanted inside the widget. */
.pcr.pcr :where(*),
.pcr-standalone.pcr-standalone :where(*) {
	box-sizing: border-box !important;
	max-width: 100% !important;
}

/* (3) Classic theme hijacks on text nodes. None of them is varied below. */
.pcr.pcr :where(*),
.pcr-standalone.pcr-standalone :where(*) {
	text-indent: 0 !important;
	text-transform: none !important;
	word-spacing: normal !important;
	letter-spacing: normal !important;
}

/* (4) A painted background on a control is the theme's own decoration; the
   only background the form wants is the one the palette defines. The colour is
   NOT pinned: `:disabled` and `.is-invalid` both vary it below. */
.pcr.pcr .pcr-input,
.pcr.pcr .pcr-btn,
.pcr-standalone.pcr-standalone .pcr-input,
.pcr-standalone.pcr-standalone .pcr-btn {
	background-image: none !important;
	text-shadow: none !important;
}

/* (5) The visible failure this stylesheet was written against: a theme's
   `input { border: none; padding: 0 }` leaves an invisible field, and a
   `font-size` under 16px makes iOS zoom the page on focus.

   Only longhands that nothing below varies are pinned. Left out on purpose,
   because they *are* varied and the floor resolves them correctly:
     · border-color — `:focus`, `.is-invalid`, `.pcr-inputgroup:focus-within`
     · background-color — `:disabled`, `.is-invalid`
     · min-height — `.pcr-input--area` and `.pcr-input--date` both raise it
     · padding-right — `.pcr-select .pcr-input` needs the caret's room
     · padding-inline on the button — the 600px/900px breakpoints override it */
.pcr.pcr .pcr-input,
.pcr-standalone.pcr-standalone .pcr-input {
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding-top: var(--pcr-pad-control-block) !important;
	padding-bottom: var(--pcr-pad-control-block) !important;
	padding-left: var(--pcr-pad-control-inline) !important;
	border-style: solid !important;
	border-width: var(--pcr-edge) !important;
	border-radius: var(--pcr-radius-sm) !important;
	font-family: inherit !important;
	font-size: var(--pcr-font-control) !important;
}

/* (6) Same for the buttons: the CTA, « Continuer » and the PayPal button are
   the focal action of their screen, so a theme's `button { padding: 3px 10px;
   min-height: 0 }` must not be able to shrink them under the 48px target or
   underline the pay link. `width` is left out — the breakpoints set it. */
.pcr.pcr .pcr-btn,
.pcr-standalone.pcr-standalone .pcr-btn {
	min-height: var(--pcr-control) !important;
	margin: 0 !important;
	padding-top: var(--pcr-pad-btn-block) !important;
	padding-bottom: var(--pcr-pad-btn-block) !important;
	border-style: solid !important;
	border-width: var(--pcr-edge) !important;
	border-radius: var(--pcr-radius-sm) !important;
	font-family: inherit !important;
	font-size: var(--pcr-font-control) !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: normal !important;
	cursor: pointer !important;
	touch-action: manipulation !important;
}

/* A field is left-aligned text by definition. Nothing below varies this, so it
   is pinned rather than merely declared: a theme that justifies its content
   (`text-align: justify` is a common editorial default) turns a one-line hint
   into a river of stretched words, and specificity alone cannot rule that out. */
.pcr.pcr .pcr-field,
.pcr-standalone.pcr-standalone .pcr-field {
	text-align: left !important;
}

.pcr.pcr [hidden],
.pcr-standalone.pcr-standalone [hidden] {
	display: none !important;
}

/* Nothing inside the widget may push the page sideways. */
.pcr.pcr,
.pcr-standalone.pcr-standalone {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	overflow-x: clip;
}

/* Theme escape hatch: undo the few theme rules that target the plugin class. */
.entry-content .pcr.pcr,
.post-content .pcr.pcr,
.wp-block-post-content .pcr.pcr {
	max-width: 100%;
	font-size: 1rem;
}

/* ====================================================== 03 Wrapper / screens */

.pcr.pcr {
	margin: clamp(1.25rem, 0.8rem + 2vw, 2.25rem) 0;
	scroll-margin-top: 5.5rem;
}

.pcr.pcr .pcr-screen {
	animation: pcr-in .32s cubic-bezier(.2, .7, .3, 1) both;
}

/* State hooks. The four screens are addressable by site authors so a theme can
   restyle one of them without touching the funnel. */
.pcr.pcr .pcr-screen--cta,
.pcr.pcr .pcr-screen--form,
.pcr.pcr .pcr-screen--preview,
.pcr.pcr .pcr-screen--success {
	animation-name: pcr-in;
}

@keyframes pcr-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcr.pcr .pcr-screen,
	.pcr.pcr .pcr-success__badge,
	.pcr.pcr .pcr-toast {
		animation: none;
	}
}

.pcr.pcr .pcr-eyebrow {
	margin: 0 0 .375rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pcr-primary);
}

/* ================================================================ 04 Buttons */

.pcr.pcr .pcr-btn {
	--btn-bg: var(--pcr-primary);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	/* A theme floats its buttons right and hands them its own chrome; the
	   button is the one focal action of the screen and stays in the flow. */
	float: none;
	clear: none;
	width: 100%;
	min-height: var(--pcr-control);
	max-width: 100%;
	margin: 0;
	padding: var(--pcr-pad-btn-block) var(--pcr-pad-btn-inline);
	border: var(--pcr-edge) solid transparent;
	border-radius: var(--pcr-radius-sm);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: inherit;
	font-size: var(--pcr-font-control);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	touch-action: manipulation;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
	box-shadow: 0 6px 16px -8px rgba(13, 110, 140, .8);
}

.pcr.pcr .pcr-btn:hover {
	background: var(--pcr-primary-dark);
	color: #fff;
}

.pcr.pcr .pcr-btn:active {
	transform: translateY(1px);
}

.pcr.pcr .pcr-btn:focus-visible {
	outline: 3px solid rgba(18, 165, 148, .55);
	outline-offset: 2px;
}

.pcr.pcr .pcr-btn[disabled],
.pcr.pcr .pcr-btn.is-busy {
	opacity: .62;
	pointer-events: none;
}

.pcr.pcr .pcr-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--pcr-primary-dark);
	border-color: var(--pcr-border);
	box-shadow: none;
}

.pcr.pcr .pcr-btn--ghost:hover {
	background: var(--pcr-bg);
	color: var(--pcr-primary-dark);
}

.pcr.pcr .pcr-btn--pay {
	--btn-bg: var(--pcr-accent);
	background: var(--pcr-accent);
	box-shadow: 0 8px 20px -8px rgba(18, 165, 148, .85);
}

.pcr.pcr .pcr-btn--pay:hover {
	background: #0e8b7d;
}

.pcr.pcr .pcr-btn__arrow {
	flex: 0 0 auto;
	transition: transform .18s ease;
}

.pcr.pcr .pcr-btn:hover .pcr-btn__arrow {
	transform: translateX(3px);
}

/* ================================================================= 05 Stepper */

.pcr.pcr .pcr-form {
	padding: var(--pcr-pad);
	border: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius);
	background: var(--pcr-surface);
	box-shadow: var(--pcr-shadow);
}

.pcr.pcr .pcr-progress {
	position: sticky;
	top: 0;
	z-index: 5;
	margin: calc(var(--pcr-pad) * -1) calc(var(--pcr-pad) * -1) var(--pcr-gap);
	padding: .75rem var(--pcr-pad) .625rem;
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius) var(--pcr-radius) 0 0;
}

/* Keep the sticky bar clear of the WP admin bar (46px on phones). */
body.admin-bar .pcr-progress {
	top: 46px;
}

.pcr.pcr .pcr-progress__count {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: .3rem;
	margin: 0 0 .5rem;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pcr-muted);
	white-space: nowrap;
}

.pcr.pcr .pcr-fields {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.pcr.pcr .pcr-progress__count b {
	font-size: .9375rem;
	font-weight: 800;
	color: var(--pcr-primary-dark);
	font-variant-numeric: tabular-nums;
}

.pcr.pcr .pcr-progress__of {
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .625rem;
}

.pcr.pcr .pcr-progress__sep,
.pcr.pcr .pcr-progress__tot {
	color: var(--pcr-muted);
}

.pcr.pcr .pcr-progress__now {
	min-width: 0;
	margin-left: auto;
	overflow: hidden;
	font-weight: 700;
	color: var(--pcr-ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcr.pcr .pcr-progress__bar {
	height: 5px;
	border-radius: 5px;
	background: var(--pcr-primary-light);
	overflow: hidden;
}

.pcr.pcr .pcr-progress__fill {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--pcr-primary), var(--pcr-accent));
	transition: width .3s cubic-bezier(.2, .7, .3, 1);
}

.pcr.pcr .pcr-dots {
	display: flex;
	justify-content: space-between;
	gap: .25rem;
	margin: .625rem 0 0;
	padding: 0;
	list-style: none;
}

.pcr.pcr .pcr-dots__item {
	display: flex;
	align-items: center;
	gap: .3125rem;
	/* An `<li>`: a theme's `li { margin-bottom: .8em; list-style: disc }`
	   would otherwise space the stepper out and print bullets. */
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	font-size: .6875rem;
	font-weight: 600;
	color: var(--pcr-muted);
	opacity: .55;
	transition: opacity .2s ease, color .2s ease;
}

.pcr.pcr .pcr-dots__n {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--pcr-border);
	border-radius: 50%;
	background: #fff;
	color: var(--pcr-muted);
	font-size: .6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Labels are hidden on phones: the counter above already names the step, and a
   wrapping label ("Antécéd / ents") is worse than no label at all. */
.pcr.pcr .pcr-dots__label {
	display: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	hyphens: none;
	word-break: keep-all;
}

.pcr.pcr .pcr-dots__item.is-active {
	opacity: 1;
	color: var(--pcr-primary-dark);
}

.pcr.pcr .pcr-dots__item.is-active .pcr-dots__n {
	border-color: var(--pcr-primary);
	background: var(--pcr-primary);
	color: #fff;
}

.pcr.pcr .pcr-dots__item.is-done {
	opacity: .9;
	color: var(--pcr-accent);
}

.pcr.pcr .pcr-dots__item.is-done .pcr-dots__n {
	border-color: var(--pcr-accent);
	background: var(--pcr-accent);
	color: #fff;
}

/* ================================================== 06 Step panels + grid ==== */

.pcr.pcr .pcr-step {
	scroll-margin-top: 6.5rem;
}

.pcr.pcr .pcr-step__head {
	margin-bottom: var(--pcr-gap);
}

.pcr.pcr .pcr-step__kicker {
	margin: 0 0 .25rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pcr-primary);
}

.pcr.pcr .pcr-step__title {
	margin: 0 0 .3rem;
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
	line-height: 1.22;
	font-weight: 750;
	letter-spacing: -.012em;
	color: var(--pcr-ink);
	text-wrap: balance;
}

.pcr.pcr .pcr-step__sub {
	margin: 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--pcr-muted);
}

/* One column on phones; the field's own children always stack label → control
   → hint → error, so a hint can never drift to another field. */
.pcr.pcr .pcr-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pcr-gap);
	align-items: start;
}

.pcr.pcr .pcr-field {
	display: flex;
	flex-direction: column;
	gap: var(--pcr-gap-sm);
	min-width: 0;
	transition: opacity .2s ease;
}

.pcr.pcr .pcr-label {
	display: block;
	/* A theme labels its fields with `float: left; width: 40%`. Stated here so
	   the label stays on its own line whatever the theme does. */
	float: none;
	clear: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	text-align: left;
	font-size: .8125rem;
	font-weight: 650;
	line-height: 1.35;
	color: var(--pcr-ink);
	cursor: pointer;
}

.pcr.pcr .pcr-label--group {
	cursor: default;
}

.pcr.pcr .pcr-req {
	margin-left: .1875rem;
	color: var(--pcr-danger);
	font-weight: 700;
}

.pcr.pcr .pcr-help {
	display: block;
	float: none;
	clear: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	font-style: normal;
	font-size: .75rem;
	line-height: 1.45;
	color: var(--pcr-muted);
}

.pcr.pcr .pcr-err {
	display: block;
	float: none;
	clear: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	font-style: normal;
	font-size: .75rem;
	font-weight: 650;
	line-height: 1.4;
	color: var(--pcr-danger);
}

.pcr.pcr .pcr-err:not([hidden])::before {
	content: "\26A0\00A0";
}

.pcr.pcr .pcr-field.is-invalid > .pcr-label {
	color: var(--pcr-danger);
}

/* =============================================================== 07 Controls */

/* The control box, stated in full on purpose: this is what a theme erases
   (border, background, padding, width) and what the funnel depends on. The
   uniform floor of section 03 puts it at (0,3,0), above any element+attribute
   theme rule. `appearance` is the one property pinned here, because the date
   inputs below must be able to hand the native picker back. */
.pcr.pcr .pcr-input {
	display: block;
	width: 100%;
	min-width: 0;
	min-height: var(--pcr-control);
	margin: 0;
	padding: var(--pcr-pad-control-block) var(--pcr-pad-control-inline);
	border: var(--pcr-edge) solid var(--pcr-border);
	border-radius: var(--pcr-radius-sm);
	background-color: #fff;
	background-image: none;
	box-shadow: none;
	color: var(--pcr-text);
	font-family: inherit;
	font-size: var(--pcr-font-control); /* 16px minimum: no iOS zoom on focus */
	font-weight: inherit;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

.pcr.pcr .pcr-input::placeholder {
	color: #9bafbc;
	opacity: 1;
}

.pcr.pcr .pcr-input:focus {
	outline: 0;
	border-color: var(--pcr-primary);
	box-shadow: 0 0 0 3px rgba(13, 110, 140, .16);
}

.pcr.pcr .pcr-input:focus-visible {
	outline: 0;
}

.pcr.pcr .pcr-input:disabled {
	background: var(--pcr-bg);
	color: var(--pcr-muted);
	-webkit-text-fill-color: var(--pcr-muted);
	opacity: 1;
}

.pcr.pcr .pcr-input.is-invalid {
	border-color: var(--pcr-danger);
	background: var(--pcr-danger-light);
}

.pcr.pcr .pcr-input--area {
	min-height: 6.75rem;
	resize: vertical;
	line-height: 1.55;
}

/* Date inputs keep their native picker — the global appearance reset would
   otherwise strip the calendar indicator, which is the whole point of a
   date field on a phone. Only the box is styled.
   `!important` is required: the base rule pins `appearance: none !important`,
   and a non-important `auto` can never beat it. */
.pcr.pcr .pcr-input--date {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	min-height: var(--pcr-control);
	line-height: normal;
}

.pcr.pcr .pcr-input--date::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .55;
}

/* Native spinners would sit under the unit suffix — remove them. */
.pcr.pcr .pcr-input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.pcr.pcr .pcr-input[type="number"]::-webkit-outer-spin-button,
.pcr.pcr .pcr-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Unit group: the suffix is a flex sibling of the input, so it can never
   overlap the value nor detach from the box. */
.pcr.pcr .pcr-inputgroup {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
}

.pcr.pcr .pcr-inputgroup .pcr-input {
	flex: 1 1 auto;
	min-width: 0;
}

.pcr.pcr .pcr-suffix {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: -1px;
	padding: 0 .8125rem;
	border: 1.5px solid var(--pcr-border);
	border-left: 0;
	border-radius: 0 var(--pcr-radius-sm) var(--pcr-radius-sm) 0;
	background: var(--pcr-bg);
	color: var(--pcr-muted);
	font-size: .8125rem;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.pcr.pcr .pcr-inputgroup:focus-within .pcr-suffix {
	border-color: var(--pcr-primary);
	background: var(--pcr-primary-light);
}

/* Select: appearance reset + custom caret drawn in the palette. */
.pcr.pcr .pcr-select {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
}

.pcr.pcr .pcr-select .pcr-input {
	display: block;
	width: 100%;
	padding-right: 2.5rem;
	cursor: pointer;
	background-image: none;
	/* Older engines keep a native arrow unless both properties are set. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.pcr.pcr .pcr-caret {
	position: absolute;
	top: 50%;
	right: 1rem;
	width: .5rem;
	height: .5rem;
	margin-top: -.3125rem;
	border-right: 2px solid var(--pcr-primary);
	border-bottom: 2px solid var(--pcr-primary);
	border-radius: 1px;
	transform: rotate(45deg);
	pointer-events: none;
}

.pcr.pcr .pcr-select .pcr-input:disabled + .pcr-caret {
	border-color: var(--pcr-muted);
	opacity: .6;
}

/* Radios: full-width tap targets, one per row on phones. */
.pcr.pcr .pcr-radios {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .5rem;
}

.pcr.pcr .pcr-radio {
	display: flex;
	align-items: center;
	gap: .625rem;
	/* A theme's `label { float: left; width: 40%; margin: 0 2% .9em 0 }` is
	   the classic way a radio grid collapses into a sideways-scrolling mess.
	   These are grid items, so they take their size from the track. */
	float: none;
	width: auto;
	margin: 0;
	/* The theme bolds every `label`. The option text carries its own weight,
	   so the box must not. */
	font-weight: 400;
	min-height: var(--pcr-control);
	padding: .625rem .8125rem;
	border: 1.5px solid var(--pcr-border);
	border-radius: var(--pcr-radius-sm);
	background: #fff;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}

.pcr.pcr .pcr-radio input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.pcr.pcr .pcr-radio__dot {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid var(--pcr-border);
	border-radius: 50%;
	background: #fff;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.pcr.pcr .pcr-radio__text {
	font-size: .90625rem;
	line-height: 1.35;
	color: var(--pcr-text);
}

.pcr.pcr .pcr-radio:has(input:checked) {
	border-color: var(--pcr-primary);
	background: var(--pcr-primary-light);
}

.pcr.pcr .pcr-radio input:checked + .pcr-radio__dot {
	border-color: var(--pcr-primary);
	box-shadow: inset 0 0 0 4.5px var(--pcr-primary);
}

.pcr.pcr .pcr-radio input:focus-visible + .pcr-radio__dot {
	box-shadow: inset 0 0 0 4.5px var(--pcr-primary), 0 0 0 3px rgba(18, 165, 148, .5);
}

.pcr.pcr .pcr-radio.is-invalid {
	border-color: var(--pcr-danger);
	background: var(--pcr-danger-light);
}

.pcr.pcr .pcr-scroller {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ============================================================== 08 Repeater */

.pcr.pcr .pcr-rep {
	padding: .8125rem;
	border: 1.5px dashed var(--pcr-border);
	border-radius: var(--pcr-radius-sm);
	background: var(--pcr-bg);
}

.pcr.pcr .pcr-rep.is-invalid {
	border-color: var(--pcr-danger);
	background: var(--pcr-danger-light);
}

.pcr.pcr .pcr-rep__label {
	display: flex;
	flex-direction: column;
	gap: var(--pcr-gap-sm);
}

.pcr.pcr .pcr-rep__list {
	display: grid;
	gap: .625rem;
}

.pcr.pcr .pcr-rep__list:empty {
	display: none;
}

.pcr.pcr .pcr-rep__row {
	padding: .75rem;
	border: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius-sm);
	background: #fff;
}

.pcr.pcr .pcr-rep__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .25rem .5rem;
	margin-bottom: .625rem;
}

.pcr.pcr .pcr-rep__title {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pcr-primary);
}

.pcr.pcr .pcr-rep__del {
	display: inline-flex;
	align-items: center;
	min-height: var(--pcr-control);
	margin: -.5rem -.5rem -.5rem 0;
	padding: .5rem;
	border: 0;
	border-radius: var(--pcr-radius-sm);
	background: none;
	color: var(--pcr-danger);
	font-size: .75rem;
	font-weight: 650;
	text-decoration: underline;
	cursor: pointer;
}

.pcr.pcr .pcr-rep__del:hover {
	background: var(--pcr-danger-light);
	color: #8e1f1e;
}

.pcr.pcr .pcr-rep__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--pcr-control);
	margin-top: .625rem;
	padding: .6875rem;
	border: 1.5px dashed var(--pcr-primary);
	border-radius: var(--pcr-radius-sm);
	background: #fff;
	color: var(--pcr-primary-dark);
	font-size: .875rem;
	font-weight: 650;
	cursor: pointer;
	transition: background-color .16s ease;
}

.pcr.pcr .pcr-rep__add:hover {
	background: var(--pcr-primary-light);
}

/* =============================================================== 09 Consent */

.pcr.pcr .pcr-consent {
	margin-top: var(--pcr-gap);
	padding: .875rem;
	border: 1.5px solid var(--pcr-warn);
	border-radius: var(--pcr-radius-sm);
	background: var(--pcr-warn-light);
}

.pcr.pcr .pcr-check {
	display: flex;
	align-items: flex-start;
	gap: .6875rem;
	/* A `<label>`, so the same theme rule as .pcr-radio applies. The consent
	   box is the one control that must never shrink below its text. */
	float: none;
	width: auto;
	margin: 0;
	font-weight: 400;
	min-height: var(--pcr-control);
	cursor: pointer;
}

.pcr.pcr .pcr-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.pcr.pcr .pcr-check__box {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid var(--pcr-warn);
	border-radius: 5px;
	background: #fff;
	transition: background-color .16s ease, box-shadow .16s ease;
}

.pcr.pcr .pcr-check input:checked + .pcr-check__box {
	background: var(--pcr-warn);
	box-shadow: inset 0 0 0 3.5px #fff;
}

.pcr.pcr .pcr-check input:focus-visible + .pcr-check__box {
	box-shadow: 0 0 0 3px rgba(178, 106, 0, .3);
}

.pcr.pcr .pcr-check.is-invalid .pcr-check__box {
	border-color: var(--pcr-danger);
}

.pcr.pcr .pcr-check__text {
	font-size: .78125rem;
	line-height: 1.5;
	color: #6b4708;
}

.pcr.pcr .pcr-consent__note {
	margin: .5625rem 0 0;
	font-size: .71875rem;
	line-height: 1.45;
	color: #7a5410;
}

.pcr.pcr .pcr-error {
	margin: var(--pcr-gap) 0 0;
	padding: .6875rem .8125rem;
	border: 1px solid var(--pcr-danger);
	border-radius: var(--pcr-radius-sm);
	background: var(--pcr-danger-light);
	color: #8e1f1e;
	font-size: .84375rem;
	font-weight: 600;
}

/* =========================================================== 10 Navigation */

/* Mobile: one full-width primary action per row, the secondary underneath. */
.pcr.pcr .pcr-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .625rem;
	margin-top: var(--pcr-gap);
}

.pcr.pcr .pcr-nav__spacer {
	display: none;
}

.pcr.pcr .pcr-nav .pcr-btn {
	width: 100%;
}

/* ============================================================ 11 CTA block */

.pcr.pcr .pcr-cta {
	border: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius);
	background: var(--pcr-surface);
	box-shadow: var(--pcr-shadow);
	overflow: hidden;
}

.pcr.pcr .pcr-cta__doc {
	position: relative;
	padding: 1.25rem var(--pcr-pad) 0;
	background: linear-gradient(180deg, var(--pcr-primary-light) 0%, rgba(231, 241, 245, 0) 100%);
}

/* Decorative A4 thumbnail: shows the shape of the deliverable. */
.pcr.pcr .pcr-doc {
	display: grid;
	gap: 5px;
	padding: 12px 13px 14px;
	border: 1px solid var(--pcr-border);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 26px -14px rgba(11, 34, 57, .3);
}

.pcr.pcr .pcr-doc__head {
	width: 62%;
	height: 9px;
	border-radius: 3px;
	background: var(--pcr-ink);
	opacity: .88;
}

.pcr.pcr .pcr-doc__sub {
	width: 38%;
	height: 4px;
	margin-bottom: 3px;
	border-radius: 2px;
	background: var(--pcr-primary);
	opacity: .5;
}

.pcr.pcr .pcr-doc__h {
	width: 40%;
	height: 5px;
	margin-top: 5px;
	border-radius: 2px;
	background: var(--pcr-primary);
	opacity: .45;
}

.pcr.pcr .pcr-doc__row {
	height: 4px;
	border-radius: 2px;
	background: #dde7ec;
}

.pcr.pcr .pcr-doc__alert {
	height: 11px;
	margin: 3px 0;
	border: 0;
	border-left: 3px solid var(--pcr-warn);
	border-radius: 3px;
	background: var(--pcr-warn-light);
}

.pcr.pcr .pcr-cta__stamp {
	position: absolute;
	right: 10px;
	bottom: 8px;
	padding: 3px 8px;
	border-radius: 20px;
	background: var(--pcr-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: 0 4px 12px -4px rgba(18, 165, 148, .6);
}

.pcr.pcr .pcr-cta__body {
	padding: 1.5rem var(--pcr-pad) 1.625rem;
}

.pcr.pcr .pcr-cta__title {
	margin: 0 0 .75rem;
	font-size: clamp(1.375rem, 1.1rem + 1.4vw, 1.8125rem);
	line-height: 1.2;
	letter-spacing: -.015em;
	font-weight: 750;
	color: var(--pcr-ink);
	text-wrap: balance;
}

.pcr.pcr .pcr-cta__text {
	margin: 0 0 1.125rem;
	font-size: max(1rem, 16px);
	color: var(--pcr-text);
}

.pcr.pcr .pcr-steps-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.pcr.pcr .pcr-chip {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--pcr-border);
	border-radius: 20px;
	background: var(--pcr-bg);
	color: var(--pcr-muted);
	font-size: .75rem;
	font-weight: 600;
}

.pcr.pcr .pcr-chip__n {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pcr-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.pcr.pcr .pcr-cta__actions {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	align-items: stretch;
	margin-bottom: 1.125rem;
}

.pcr.pcr .pcr-cta__price {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--pcr-ink);
	font-size: 1.0625rem;
	font-weight: 700;
}

.pcr.pcr .pcr-cta__note {
	display: block;
	margin: 0;
	color: var(--pcr-muted);
	font-size: .6875rem;
	font-style: normal;
	font-weight: 500;
	letter-spacing: .01em;
}

.pcr.pcr .pcr-reassurance {
	display: grid;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.pcr.pcr .pcr-reassurance li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--pcr-muted);
	font-size: .84375rem;
}

.pcr.pcr .pcr-reassurance li::before {
	content: "";
	position: absolute;
	top: .34em;
	left: 0;
	width: 14px;
	height: 8px;
	border: 0;
	border-left: 2px solid var(--pcr-accent);
	border-bottom: 2px solid var(--pcr-accent);
	border-radius: 1px;
	transform: rotate(-45deg);
}

.pcr.pcr .pcr-legal {
	margin: 0;
	padding-top: .75rem;
	border-top: 1px dashed var(--pcr-border);
	color: var(--pcr-muted);
	font-size: .71875rem;
	line-height: 1.5;
}

.pcr.pcr .pcr-legal a {
	color: var(--pcr-primary);
}

.pcr.pcr .pcr-legal--strong {
	padding: .75rem .875rem;
	border-top: 1px solid var(--pcr-warn-light);
	border-radius: var(--pcr-radius-sm);
	background: var(--pcr-warn-light);
	color: var(--pcr-warn);
	font-weight: 600;
}

.pcr.pcr .pcr-legal--form {
	margin-top: 1rem;
}

/* ==================================================== 12 Preview + paywall == */

.pcr.pcr .pcr-preview {
	border: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius);
	background: var(--pcr-surface);
	box-shadow: var(--pcr-shadow);
	overflow: hidden;
}

.pcr.pcr .pcr-preview__head {
	padding: 1.25rem var(--pcr-pad) .875rem;
	background: linear-gradient(180deg, var(--pcr-primary-light), rgba(231, 241, 245, 0));
}

.pcr.pcr .pcr-preview__lead {
	margin: 0;
	color: var(--pcr-text);
	font-size: .84375rem;
}

.pcr.pcr .pcr-preview__doc {
	position: relative;
	padding: .25rem var(--pcr-pad) 0;
}

/* The paywall is a gradient laid over the bottom of the document, so it
   tracks the real document height at every viewport — no magic offsets. */
.pcr.pcr .pcr-preview__doc::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 8.5rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 76%);
	pointer-events: none;
}

.pcr.pcr .pcr-lock {
	position: relative;
	margin-top: -4.25rem;
	padding: 0 var(--pcr-pad);
}

.pcr.pcr .pcr-lock__panel {
	position: relative;
	margin: 0 auto;
	padding: 1.375rem 1.125rem 1.25rem;
	border: 1.5px solid var(--pcr-border);
	border-radius: var(--pcr-radius);
	background: #fff;
	box-shadow: var(--pcr-shadow-lg);
	text-align: center;
}

.pcr.pcr .pcr-lock__icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: .625rem;
	border-radius: 50%;
	background: var(--pcr-accent-light);
	color: var(--pcr-accent);
}

.pcr.pcr .pcr-lock__title {
	margin: 0 0 .375rem;
	color: var(--pcr-ink);
	font-size: 1.125rem;
	font-weight: 700;
	text-wrap: balance;
}

.pcr.pcr .pcr-lock__text {
	margin: 0 0 .875rem;
	color: var(--pcr-muted);
	font-size: .84375rem;
}

.pcr.pcr .pcr-lock__price {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-bottom: 1rem;
}

.pcr.pcr .pcr-lock__price strong {
	color: var(--pcr-ink);
	font-size: 1.75rem;
	line-height: 1.1;
}

.pcr.pcr .pcr-lock__price span {
	color: var(--pcr-muted);
	font-size: .71875rem;
}

.pcr.pcr .pcr-lock__legal {
	margin: .875rem 0 0;
	padding-top: .75rem;
	border-top: 1px dashed var(--pcr-border);
	color: var(--pcr-muted);
	font-size: .6875rem;
}

/* Payment panel: label, SDK button container, status/fallback/test-mode lines.
   The PayPal SDK injects its own buttons; the container reserves height so the
   funnel does not reflow when the SDK arrives. All rules sit at (0,3,0) so a
   theme's element selectors can never decide margin/line-height here. */
.pcr.pcr .pcr-pay {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 .25rem;
	padding: 0;
	text-align: center;
}

.pcr.pcr .pcr-pay__label {
	display: block;
	margin: 0 0 .5rem;
	padding: 0;
	color: var(--pcr-text);
	font-size: .84375rem;
	font-weight: 650;
	line-height: 1.4;
	text-align: center;
}

.pcr.pcr .pcr-pay__buttons {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0 auto;
}

.pcr.pcr .pcr-pay__status {
	margin: .625rem 0 0;
	padding: .5rem .75rem;
	border-radius: var(--pcr-radius-sm);
	background: var(--pcr-warn-light);
	color: var(--pcr-warn);
	font-size: .78125rem;
	line-height: 1.45;
	text-align: center;
}

.pcr.pcr .pcr-pay__fallback {
	margin: .625rem 0 0;
	padding: 0;
	color: var(--pcr-danger);
	font-size: .75rem;
	line-height: 1.45;
}

.pcr.pcr .pcr-pay__fallback a {
	color: var(--pcr-primary);
	text-decoration: underline;
}

.pcr.pcr .pcr-pay__testmode {
	margin: .625rem auto 0;
	max-width: 30em;
	padding: 0;
	color: var(--pcr-muted);
	font-size: .6875rem;
	line-height: 1.45;
	text-align: center;
}

/* Discreet demonstration banner shown at the top of the widget in test mode. */
.pcr.pcr .pcr-testnotice {
	display: block;
	margin: 0 0 .875rem;
	padding: .5rem .75rem;
	border: 1px dashed var(--pcr-warn);
	border-radius: var(--pcr-radius-sm);
	background: var(--pcr-warn-light);
	color: var(--pcr-warn);
	font-size: .71875rem;
	line-height: 1.45;
	text-align: center;
}

.pcr.pcr .pcr-preview__back {
	display: block;
	width: 100%;
	min-height: var(--pcr-control);
	margin: 1.25rem 0 1.25rem;
	padding: .6875rem;
	border: 0;
	border-top: 1px solid var(--pcr-border);
	background: #fff;
	color: var(--pcr-primary-dark);
	font-size: .84375rem;
	font-weight: 650;
	cursor: pointer;
}

/* Blurred skeleton of the locked sections. */
.pcr.pcr .pcr-skeleton {
	padding: 4px 0 2px;
	filter: blur(3.4px);
	opacity: .62;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.pcr.pcr .pcr-skeleton__h {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 7px;
	color: var(--pcr-ink);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pcr.pcr .pcr-skeleton__row {
	display: block;
	height: 7px;
	margin-bottom: 6px;
	border-radius: 4px;
	background: linear-gradient(90deg, #cfdde5, #e3edf2);
}

/* ==================================================== 13 Report document ==== */

.pcr.pcr .pcr-doc-html {
	padding: 1.25rem 1rem;
	border: 1px solid var(--pcr-border);
	border-radius: 10px;
	background: #fff;
	font-size: .84375rem;
}

.pcr.pcr .pcr-doc-html__head {
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--pcr-ink);
}

.pcr.pcr .pcr-doc-html__kicker {
	margin: 0;
	color: var(--pcr-primary);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.pcr.pcr .pcr-doc-html__title {
	margin: 3px 0 2px;
	color: var(--pcr-ink);
	font-size: 1.1875rem;
	font-weight: 750;
	text-wrap: balance;
}

.pcr.pcr .pcr-doc-html__meta {
	margin: 0;
	color: var(--pcr-muted);
	font-size: .6875rem;
}

.pcr.pcr .pcr-doc-html__disclaimer {
	margin: .75rem 0 0;
	padding: .5625rem .6875rem;
	border: 0;
	border-left: 3px solid var(--pcr-warn);
	border-radius: 0 6px 6px 0;
	background: var(--pcr-warn-light);
	color: #6b4708;
	font-size: .71875rem;
}

.pcr.pcr .pcr-doc-html__h {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 1.125rem 0 .5rem;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--pcr-border);
	color: var(--pcr-ink);
	font-size: .6875rem;
	font-weight: 750;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pcr.pcr .pcr-doc-html__n {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border-radius: 3px;
	background: var(--pcr-accent);
	color: #fff;
	font-size: 10px;
	letter-spacing: 0;
}

.pcr.pcr .pcr-doc-html__defs {
	display: grid;
	gap: 4px;
}

.pcr.pcr .pcr-doc-html__defs > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding: 5px 0;
	border-bottom: 1px dotted #e8eff3;
}

.pcr.pcr .pcr-doc-html__defs dt {
	color: var(--pcr-muted);
	font-size: .65625rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pcr.pcr .pcr-doc-html__defs dd {
	margin: 1px 0 0;
	color: var(--pcr-text);
	font-weight: 600;
}

.pcr.pcr .pcr-doc-html__alert {
	margin: 0;
	padding: .625rem .6875rem;
	border: 0;
	border-left: 3px solid var(--pcr-danger);
	border-radius: 0 6px 6px 0;
	background: var(--pcr-danger-light);
	color: #8e1f1e;
	font-weight: 600;
}

.pcr.pcr .pcr-doc-html__muted {
	margin: 0;
	color: var(--pcr-muted);
	font-style: italic;
}

.pcr.pcr .pcr-doc-html__table {
	min-width: 18rem;
	font-size: .75rem;
}

.pcr.pcr .pcr-doc-html__table th {
	padding: 5px 6px;
	border-bottom: 1px solid var(--pcr-border);
	background: var(--pcr-bg);
	color: var(--pcr-muted);
	font-size: 10px;
	letter-spacing: .05em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.pcr.pcr .pcr-doc-html__table td {
	padding: 6px;
	border-bottom: 1px solid #eef4f7;
	vertical-align: top;
}

.pcr.pcr .pcr-doc-html__drug {
	margin-bottom: .5rem;
	padding: .5625rem .625rem;
	border: 1px solid var(--pcr-border);
	border-left: 3px solid var(--pcr-primary);
	border-radius: 0 6px 6px 0;
	background: #fafcfd;
}

.pcr.pcr .pcr-doc-html__drugname {
	margin: 0;
	color: var(--pcr-ink);
	font-weight: 700;
}

.pcr.pcr .pcr-doc-html__drugname span {
	color: var(--pcr-text);
	font-weight: 500;
}

.pcr.pcr .pcr-doc-html__drugname em {
	color: var(--pcr-muted);
	font-size: .71875rem;
	font-style: normal;
}

.pcr.pcr .pcr-doc-html__drugmeta {
	margin: 2px 0 0;
	color: var(--pcr-muted);
	font-size: .71875rem;
}

.pcr.pcr .pcr-doc-html__more {
	margin: .375rem 0 0;
	color: var(--pcr-primary-dark);
	font-size: .71875rem;
	font-style: italic;
}

/* Chronology: narrow gutter on phones, wider from 600px. */
.pcr.pcr .pcr-doc-html__time {
	position: relative;
	margin: 0;
	padding: 0 0 0 3.375rem;
	list-style: none;
}

.pcr.pcr .pcr-doc-html__time::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 2.5rem;
	width: 1.5px;
	background: #cfe0e8;
}

.pcr.pcr .pcr-doc-html__time li {
	position: relative;
	margin-bottom: .5rem;
}

.pcr.pcr .pcr-doc-html__time li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: -1.0625rem;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pcr-accent);
}

.pcr.pcr .pcr-doc-html__date {
	position: absolute;
	top: 0;
	left: -3.375rem;
	width: 2.875rem;
	color: var(--pcr-primary);
	font-size: .6875rem;
	font-weight: 700;
	text-align: right;
}

.pcr.pcr .pcr-doc-html__quote {
	margin: 0 0 .625rem;
	padding: .625rem .75rem;
	border: 0;
	border-left: 3px solid #c4d6e0;
	border-radius: 0 6px 6px 0;
	background: var(--pcr-bg);
	color: var(--pcr-text);
	font-style: italic;
}

.pcr.pcr .pcr-doc-html__redact {
	color: var(--pcr-muted);
	font-size: .6875rem;
	font-style: normal;
	font-weight: 700;
}

.pcr.pcr .pcr-doc-html__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: .5rem .75rem;
}

.pcr.pcr .pcr-doc-html__cell {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pcr.pcr .pcr-doc-html__cell span {
	color: var(--pcr-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pcr.pcr .pcr-doc-html__cell strong {
	color: var(--pcr-text);
	font-size: .8125rem;
}

.pcr.pcr .pcr-doc-html__q {
	margin: 0;
	padding-left: 1.125rem;
	list-style: decimal;
}

.pcr.pcr .pcr-doc-html__q li {
	margin-bottom: .375rem;
	padding-left: 2px;
	color: var(--pcr-text);
	font-style: italic;
}

.pcr.pcr .pcr-doc-html__foot {
	margin: 1rem 0 0;
	padding-top: .625rem;
	border-top: 1px solid var(--pcr-border);
	color: var(--pcr-muted);
	font-size: .65625rem;
}

/* ============================================================== 14 Success = */

.pcr.pcr .pcr-success {
	padding: 1.625rem var(--pcr-pad) 1.5rem;
	border: 1px solid var(--pcr-border);
	border-radius: var(--pcr-radius);
	background: var(--pcr-surface);
	box-shadow: var(--pcr-shadow);
	text-align: center;
}

.pcr.pcr .pcr-success__badge {
	display: inline-grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: .75rem;
	border-radius: 50%;
	background: var(--pcr-accent-light);
	color: var(--pcr-accent);
	animation: pcr-pop .4s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes pcr-pop {
	from {
		transform: scale(.6);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

.pcr.pcr .pcr-success__title {
	margin: 0 0 .5rem;
	color: var(--pcr-ink);
	font-size: 1.4375rem;
	font-weight: 750;
	text-wrap: balance;
}

.pcr.pcr .pcr-success__lead {
	max-width: 46ch;
	margin: 0 auto 1.125rem;
	color: var(--pcr-text);
	font-size: .875rem;
}

.pcr.pcr .pcr-success__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .625rem;
	max-width: 420px;
	margin: 0 auto 1.375rem;
}

.pcr.pcr .pcr-countdown {
	max-width: 420px;
	margin: -0.25rem auto 1.125rem;
	padding: .625rem .875rem;
	border-radius: var(--pcr-radius-sm);
	background: var(--pcr-warn-light);
	color: var(--pcr-warn);
	font-size: .78125rem;
	line-height: 1.45;
	text-align: center;
}

.pcr.pcr .pcr-countdown strong {
	color: var(--pcr-warn);
	font-variant-numeric: tabular-nums;
}

.pcr.pcr .pcr-countdown__sub {
	display: block;
	margin: .25rem 0 0;
	color: inherit;
	font-size: .71875rem;
}

.pcr.pcr .pcr-report {
	text-align: left;
}

.pcr-standalone.pcr-standalone {
	max-width: 45rem;
	margin: 2.5rem auto;
	padding: 0 .875rem;
}

/* =========================================================== 15 Feedback === */

.pcr.pcr .pcr-busy {
	display: inline-flex;
	align-items: center;
	gap: .5625rem;
}

.pcr.pcr .pcr-busy::before {
	content: "";
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pcr-spin .7s linear infinite;
}

@keyframes pcr-spin {
	to {
		transform: rotate(360deg);
	}
}

/* The toast is appended to <body> by the JS, so it sits outside the widget
   wrapper and outside its custom properties: literal colours only. */
.pcr-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	z-index: 99999;
	max-width: min(92vw, 460px);
	padding: .75rem 1rem;
	border: 0;
	border-radius: 10px;
	background: #0b2239;
	color: #fff;
	font-family: inherit;
	font-size: .84375rem;
	font-weight: 600;
	line-height: 1.45;
	box-shadow: 0 2px 4px rgba(11, 34, 57, .07), 0 24px 56px -20px rgba(11, 34, 57, .3);
	transform: translateX(-50%);
	animation: pcr-in .25s ease both;
}

/* =============================================== 15b Prose the theme re-spaces

 * Everywhere else in this file a component states the box it needs. These are
 * the exceptions, gathered in one place rather than scattered: they are prose
 * whose only inherited property is the one a theme takes away.
 *
 * `body .entry-content p { line-height: 1.9 }` is explicit, so it beats the
 * 1.55 the wrapper hands down — inheritance always loses to a declaration,
 * however weak. The same is true of the `margin` the theme puts on `p`, which
 * is why `.pcr-legal` states its own.
 *
 * Two values, not ten: a tight one for the uppercase kickers, the body one for
 * everything the patient actually reads. */
.pcr.pcr .pcr-eyebrow,
.pcr.pcr .pcr-step__kicker,
.pcr.pcr .pcr-paypal-fallback,
.pcr.pcr .pcr-lock__legal {
	line-height: 1.4;
}

.pcr.pcr .pcr-cta__text,
.pcr.pcr .pcr-error,
.pcr.pcr .pcr-lock__text,
.pcr.pcr .pcr-lock__title,
.pcr.pcr .pcr-preview__lead,
.pcr.pcr .pcr-success__lead {
	line-height: 1.55;
}

/* ============================================================== 16 >=600px == */

@media (min-width: 600px) {
	/* Six-column track: full = 6, half = 3, third = 2. */
	.pcr.pcr .pcr-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.pcr.pcr .pcr-field--full {
		grid-column: 1 / -1;
	}

	.pcr.pcr .pcr-field--half {
		grid-column: span 3;
	}

	.pcr.pcr .pcr-field--third {
		grid-column: span 2;
	}

	.pcr.pcr .pcr-radios {
		grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	}

	.pcr.pcr .pcr-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .625rem;
	}

	.pcr.pcr .pcr-nav__spacer {
		display: block;
		flex: 1 1 0;
	}

	.pcr.pcr .pcr-nav .pcr-btn--ghost {
		flex: 0 0 auto;
		width: auto;
		padding-inline: 1.25rem;
	}

	.pcr.pcr .pcr-nav .pcr-btn--primary {
		flex: 1 1 12rem;
		max-width: 20rem;
	}

	.pcr.pcr .pcr-doc-html__defs > div {
		grid-template-columns: 9.375rem minmax(0, 1fr);
		gap: .5rem;
	}

	.pcr.pcr .pcr-doc-html__defs dd {
		margin: 0;
	}

	.pcr.pcr .pcr-doc-html__time {
		padding-left: 4.75rem;
	}

	.pcr.pcr .pcr-doc-html__time::before {
		left: 3.75rem;
	}

	.pcr.pcr .pcr-doc-html__time li::before {
		left: -1.4375rem;
	}

	.pcr.pcr .pcr-doc-html__date {
		left: -4.75rem;
		width: 3.625rem;
	}

	.pcr.pcr .pcr-doc-html {
		padding: 1.75rem 1.875rem;
		font-size: .875rem;
	}

	.pcr.pcr .pcr-doc-html__title {
		font-size: 1.375rem;
	}

	.pcr.pcr .pcr-doc-html__table {
		min-width: 0;
	}

	.pcr.pcr .pcr-cta__actions {
		flex-direction: row;
		align-items: center;
	}

	.pcr.pcr .pcr-cta__actions .pcr-btn {
		flex: 1 1 auto;
		width: auto;
	}

	.pcr.pcr .pcr-cta__price {
		align-items: flex-end;
	}

	.pcr.pcr .pcr-success__actions {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.pcr.pcr .pcr-success__actions .pcr-btn--ghost {
		width: auto;
	}
}

/* ============================================================== 17 >=900px == */

@media (min-width: 783px) {
	/* The admin bar shrinks to its desktop height. */
	body.admin-bar .pcr-progress {
		top: 32px;
	}
}

@media (min-width: 900px) {
	.pcr.pcr .pcr-form,
	.pcr.pcr .pcr-preview,
	.pcr.pcr .pcr-success {
		max-width: 48.75rem;
		margin-right: auto;
		margin-left: auto;
	}

	.pcr.pcr .pcr-cta {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		align-items: stretch;
	}

	.pcr.pcr .pcr-cta__doc {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2.125rem 1.75rem;
		border-right: 1px solid var(--pcr-border);
		background: linear-gradient(160deg, var(--pcr-primary-light), rgba(231, 241, 245, .25));
	}

	.pcr.pcr .pcr-doc {
		width: 210px;
	}

	.pcr.pcr .pcr-cta__body {
		padding: 1.875rem 2rem 2rem;
	}

	/* Desktop: numbered steps with short labels, one line each. */
	.pcr.pcr .pcr-dots {
		gap: .5rem;
	}

	.pcr.pcr .pcr-dots__label {
		display: block;
	}

	.pcr.pcr .pcr-progress {
		padding: .875rem 1.75rem .75rem;
	}

	.pcr.pcr .pcr-step__title {
		font-size: 1.5rem;
	}

	.pcr.pcr .pcr-progress__count {
		font-size: .8125rem;
	}

	.pcr.pcr .pcr-lock__panel {
		max-width: 32.5rem;
	}

	.pcr.pcr .pcr-lock__panel .pcr-btn {
		width: auto;
		padding-inline: 2rem;
	}

	.pcr.pcr .pcr-success {
		padding: 2.125rem 2rem;
	}
}

/* ============================================================ 18 >=1200px == */

@media (min-width: 1200px) {
	.pcr.pcr {
		margin-right: auto;
		margin-left: auto;
		max-width: 62rem;
	}

	.pcr-standalone.pcr-standalone {
		max-width: 48rem;
	}
}