/**
 * Spark Pay — checkout styles.
 *
 * Written to sit inside a Divi Text module on an existing themed page, so the
 * rules below are deliberately conservative:
 *
 *  - Everything is scoped under a .spark-pay-* class. No element selectors, no
 *    resets, nothing that can reach outside the widget and restyle the page.
 *  - Colours come from CSS custom properties with sane fallbacks, so the
 *    operator can match brand colours from the theme's Customizer or a single
 *    Divi CSS block without editing this file.
 *  - font: inherit throughout, so the widget picks up the page's typography
 *    rather than fighting Divi for it.
 *
 * The one visually load-bearing piece is the agreement scroll box. A clickwrap
 * is stronger evidence when the agreement was genuinely presented rather than
 * linked, so the box is a real scroll region with a visible border, a visible
 * scrollbar, and a fixed height that makes it obvious there is more text below.
 */

.spark-pay-checkout,
.spark-pay-agreement,
.spark-pay-subscribe,
.spark-pay-account {
	/* Brand palette. Overridable from the theme Customizer or one Divi CSS
	   block without touching this file. */
	--spark-accent: #c0186f;          /* pay button, once consent is given */
	--spark-accent-hover: #8d0f4f;
	--spark-accent-text: #fff;
	--spark-disabled: #b1bdcd;        /* pay button before consent */
	--spark-line: #0999a7;            /* box borders, scrollbar */
	--spark-heading: #0c2d48;         /* /cancel/ state headings (ADR-093) */
	--spark-border: #d6dae0;          /* form field borders */
	--spark-radius: 8px;
	--spark-box-radius: 15px;
	--spark-error: #b3261e;
	--spark-focus: #e90000;          /* keyboard focus ring, site-wide red */
	--spark-muted: #5b6472;

	font: inherit;
	box-sizing: border-box;

	/*
	 * WIDTH IS DIVI'S JOB, NOT THIS PLUGIN'S.
	 *
	 * Earlier versions capped these blocks at 34em / 44rem / 60rem on invented
	 * breakpoints. That was wrong twice over. It duplicated a control Divi
	 * already provides properly — the row and column width settings — and it
	 * meant the checkout could not be widened FROM Divi, because a plugin
	 * stylesheet was quietly overruling the module settings the operator had
	 * chosen. "I can find no reason in Divi for the box to be constrained" was
	 * exactly right: the reason was in here.
	 *
	 * So both blocks simply fill their column. Two identical Divi Text modules
	 * now produce two identical widths by construction, and changing the row
	 * width in Divi moves both together — which is what anyone laying out the
	 * page would expect, and one fewer thing that can drift apart.
	 *
	 * To cap the width anyway, set one variable from Divi's Custom CSS. No
	 * plugin edit, and it applies to both blocks at once so they cannot
	 * desynchronise:
	 *
	 *     .spark-pay-checkout,
	 *     .spark-pay-agreement { --spark-max-width: 60rem; }
	 */
	display: block;
	width: 100%;
	max-width: var(--spark-max-width, none);
	margin-left: auto;
	margin-right: auto;
}


.spark-pay-checkout *,
.spark-pay-agreement * {
	box-sizing: border-box;
}

/* --- Agreement scroll box ------------------------------------------------ */

/*
 * MARGIN SHORTHAND HAZARD — do not change this back to `margin: 0 0 1.25em`.
 *
 * The shared rule above centres both blocks with `margin-left/right: auto`. A
 * three-value shorthand here re-declares left and right as 0 at equal
 * specificity and later in the file, so it silently wins: the agreement went
 * left-aligned while the checkout below it stayed centred. In a Divi column
 * wider than the max-width that reads as "the second box is narrower", because
 * the edges no longer line up — which is exactly how it was reported.
 *
 * Both blocks must keep `auto` side margins. Only the bottom margin belongs
 * here.
 */
.spark-pay-agreement {
	margin: 0 auto 1.25em;
}

.spark-pay-agreement__meta {
	font-size: 0.8em;
	color: var(--spark-muted);
	margin-bottom: 0.4em;
	letter-spacing: 0.02em;
}

.spark-pay-agreement__scroll {
	height: 260px;
	overflow-y: scroll; /* scroll, not auto: the bar should always be visible. */
	border: 1px solid var(--spark-line);
	border-radius: var(--spark-box-radius);
	padding: 1.1em 1.35em;
	/* Transparent so the page's own patterned background shows through. */
	background: transparent;
	font-size: 0.92em;
	line-height: 1.55;
	-webkit-overflow-scrolling: touch;

	/*
	 * Firefox. `auto` rather than `thin`: this bar is a control people
	 * actually drag, and a hairline target is hard to hit — particularly on a
	 * touchscreen, and particularly for the one buyer in the funnel most likely
	 * to be reading carefully.
	 */
	scrollbar-width: auto;
	scrollbar-color: var(--spark-line) transparent;
}

/*
 * WebKit scrollbar. Styled rather than left to the OS because the default grey
 * bar reads as chrome on a transparent box and the visible bar is doing real
 * work here — it is the cue that there is more agreement below, which is part
 * of the argument that the terms were genuinely presented.
 */
.spark-pay-agreement__scroll::-webkit-scrollbar {
	width: 18px;
}

.spark-pay-agreement__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.spark-pay-agreement__scroll::-webkit-scrollbar-thumb {
	background-color: var(--spark-line);
	border-radius: 9px;
	/*
	 * Inset so the thumb does not touch the rounded border. The transparent
	 * border is part of the HIT AREA even though it is not painted, so the
	 * grabbable target stays the full 18px while the visible thumb is 10px.
	 */
	border: 4px solid transparent;
	background-clip: content-box;
	min-height: 40px;
}

.spark-pay-agreement__scroll::-webkit-scrollbar-thumb:hover {
	background-color: #077c87;
	background-clip: content-box;
}

/*
 * The end arrows. WebKit draws nothing here by default, so the glyphs are
 * inline SVG triangles in the same teal. single-button prevents WebKit from
 * also drawing the paired arrow at the opposite end of each track.
 */
.spark-pay-agreement__scroll::-webkit-scrollbar-button:single-button {
	background-color: transparent;
	height: 18px;
	width: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
}

.spark-pay-agreement__scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M4 1 L7.5 6.5 L0.5 6.5 Z' fill='%230999a7'/></svg>");
}

.spark-pay-agreement__scroll::-webkit-scrollbar-button:single-button:vertical:increment {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path d='M4 7 L0.5 1.5 L7.5 1.5 Z' fill='%230999a7'/></svg>");
}

/*
 * FOCUS RING — teal, and keyboard only.
 *
 * Two problems with the previous rule. It used --spark-accent, which became
 * brand pink in 0.4.2, so clicking the scroll box drew a pink ring that had
 * nothing to do with anything. And it used :focus, which fires on MOUSE clicks
 * too — so simply scrolling the agreement lit up a focus indicator meant for
 * keyboard navigation.
 *
 * :focus-visible fires only when the browser judges a focus ring useful, which
 * is keyboard traversal and not a click. The box keeps tabindex="0" and stays
 * keyboard-scrollable, and a keyboard user still gets a clear indicator — in
 * the border colour, so it reads as part of the component.
 */
.spark-pay-agreement__scroll:focus {
	outline: none;
}

.spark-pay-agreement__scroll:focus-visible {
	/* Uses the shared ring token so every focusable thing looks the same. */
	outline: 2px solid var(--spark-focus);
	outline-offset: 2px;
}

.spark-pay-agreement__scroll p:first-child {
	margin-top: 0;
}

.spark-pay-agreement__scroll p:last-child {
	margin-bottom: 0;
}

/* --- Includes list ------------------------------------------------------- */

.spark-pay-includes {
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
}

.spark-pay-includes li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.45em;
	line-height: 1.5;
}

.spark-pay-includes li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.42em;
	width: 0.5em;
	height: 0.85em;
	border: solid var(--spark-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* --- The checkout box ---------------------------------------------------- */

/*
 * Sits directly below the agreement scroll box and matches it exactly: same
 * border, same radius, same transparent background, same width. Holds the
 * summary line, the consent checkbox and the button — the whole decision, in
 * one frame, so nothing about the purchase is visually separated from the
 * terms it follows.
 */
.spark-pay-box {
	border: 1px solid var(--spark-line);
	border-radius: var(--spark-box-radius);
	background: transparent;
	padding: 1.5em 1.6em;
}

.spark-pay-summary {
	margin: 0 0 0.9em;
	font-size: 1.25em;
	line-height: 1.35;
	color: inherit;
}

.spark-pay-summary__price {
	font-weight: 700;
}

.spark-pay-summary__dash {
	opacity: 0.7;
}

/* --- Test mode ----------------------------------------------------------- */

.spark-pay-testbanner {
	background: #fff4d6;
	border: 1px solid #e0b94a;
	border-radius: var(--spark-radius);
	padding: 0.6em 0.85em;
	margin-bottom: 1em;
	font-size: 0.85em;
	font-weight: 600;
	color: #6b4e00;
}

/* --- Fields -------------------------------------------------------------- */

.spark-pay-field {
	margin-bottom: 0.9em;
}

.spark-pay-field label {
	display: block;
	font-size: 0.88em;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.spark-pay-field input {
	width: 100%;
	padding: 0.7em 0.8em;
	border: 1px solid var(--spark-border);
	border-radius: var(--spark-radius);
	font: inherit;
	font-size: 0.95em;
	background: #fff;
}

.spark-pay-field input:focus {
	outline: none;
	border-color: var(--spark-accent);
	box-shadow: 0 0 0 3px rgba(26, 110, 240, 0.15);
}

.spark-pay-field input.spark-pay-invalid {
	border-color: var(--spark-error);
}

.spark-pay-fielderror {
	color: var(--spark-error);
	font-size: 0.82em;
	margin-top: 0.25em;
	min-height: 1em;
}

/* --- Consent ------------------------------------------------------------- */

/*
 * Inside the checkout box now, so it needs no frame of its own — the box is the
 * frame. Kept at full opacity and normal size rather than shrunk to fine print:
 * this is the affirmative act the consent record is evidence of.
 */
.spark-pay-consent {
	margin: 0 0 1.1em;
}

.spark-pay-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
	cursor: pointer;
	font-size: 0.92em;
	line-height: 1.45;
}

.spark-pay-consent__label input {
	margin: 0.2em 0 0;
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	cursor: pointer;
}

.spark-pay-assent {
	font-size: 0.88em;
	color: var(--spark-muted);
	line-height: 1.5;
	margin: 0 0 1.1em;
}

/* --- Buttons ------------------------------------------------------------- */

.spark-pay-open,
.spark-pay-button,
.spark-pay-submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.7em 0.7em;
	border: none;
	border-radius: var(--spark-radius);
	background: var(--spark-accent);
	color: var(--spark-accent-text);
	font: inherit;
	font-size: 1.02em;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.spark-pay-open:hover:not(:disabled),
.spark-pay-button:hover:not(:disabled),
.spark-pay-submit:hover:not(:disabled) {
	background: var(--spark-accent-hover);
	color: var(--spark-accent-text);
}

.spark-pay-open:active:not(:disabled),
.spark-pay-button:active:not(:disabled),
.spark-pay-submit:active:not(:disabled) {
	transform: translateY(1px);
}

/*
 * A disabled button must LOOK disabled. The checkbox gate is the whole clickwrap
 * mechanism, and a button that looks pressable but does nothing reads as a
 * broken site rather than an unmet condition.
 *
 * A muted SLATE rather than a faded pink: a washed-out version of the live
 * colour reads as "loading" or "low contrast", whereas a different hue reads as
 * "not yet". The switch to full brand pink on ticking is then unmistakable,
 * which is the feedback the checkbox needs to give.
 *
 * Text stays #fff at both states, so nothing reflows or shifts weight when the
 * colour changes.
 */
.spark-pay-open:disabled,
.spark-pay-button:disabled,
.spark-pay-submit:disabled {
	background: var(--spark-disabled);
	color: var(--spark-accent-text);
	cursor: not-allowed;
}

/* Hover must not re-colour a disabled button. */
.spark-pay-open:disabled:hover,
.spark-pay-button:disabled:hover,
.spark-pay-submit:disabled:hover {
	background: var(--spark-disabled);
}

.spark-pay-button__price {
	font-weight: 800;
}

/*
 * The opening button is the only thing visible at rest, so it carries the
 * whole call to action and is sized accordingly.
 */
.spark-pay-open {
	font-size: 1.08em;
	padding: 1.05em 1.2em;
}

.spark-pay-open[hidden] {
	display: none;
}

.spark-pay-button.is-busy .spark-pay-button__label::after {
	content: "…";
}

/* --- Inline panel -------------------------------------------------------- */

/*
 * Expands in place BELOW the button. No popup, no modal, no redirect (spec
 * section 7 step 5). max-height animation rather than display:none so the
 * expansion reads as the page continuing rather than a new context.
 */
/*
 * Expands inside the checkout box, below the button. No frame of its own — the
 * box already provides one, and nesting a second border reads as a modal.
 */
.spark-pay-panel {
	margin-top: 1.2em;
	padding-top: 1.2em;
	border-top: 1px solid var(--spark-line);
	animation: spark-pay-expand 0.22s ease-out;
}

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

@keyframes spark-pay-expand {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.spark-pay-panel { animation: none; }
	.spark-pay-open, .spark-pay-button, .spark-pay-submit { transition: none; }
}

.spark-pay-panel__summary {
	font-size: 0.9em;
	color: var(--spark-muted);
	margin-bottom: 0.9em;
}

.spark-pay-element {
	margin: 1em 0;
	min-height: 40px;
}

.spark-pay-submit.is-busy {
	opacity: 0.75;
	cursor: progress;
}

/* --- Progress while a payment is in flight -------------------------------
 *
 * THE PROBLEM THIS SOLVES, reported by the operator on the first successful
 * annual signup: the confirm round trip takes several seconds — elements
 * validation, our server creating the subscription, Stripe confirming with the
 * bank, then our server re-fetching to verify — and the page looked FROZEN for
 * all of it. A buyer who thinks a payment hung will refresh or hit back, and
 * doing that mid-confirm is how one payment becomes two or none.
 *
 * A disabled button at 60% opacity was not enough signal. This is deliberately
 * chatty instead: a spinner, a named stage, and an explicit instruction not to
 * close the page.
 *
 * role=status with aria-live=polite so the stages are ANNOUNCED rather than
 * only shown. A blind buyer gets the same reassurance a sighted one does.
 */

.spark-pay-progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	margin-top: 0.9em;
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--spark-muted);
	text-align: center;
}

.spark-pay-progress[hidden] {
	display: none;
}

.spark-pay-progress__spinner {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	border: 2px solid var(--spark-disabled);
	border-top-color: var(--spark-accent);
	border-radius: 50%;
	animation: spark-pay-spin 0.7s linear infinite;
}

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

/*
 * The warning only appears once a charge may exist, which is the only point at
 * which refreshing is actually dangerous. Before that a refresh costs nothing
 * and saying otherwise would be crying wolf.
 */
.spark-pay-progress__warn {
	display: block;
	margin-top: 0.35em;
	font-weight: 600;
	color: var(--spark-accent);
}

@media (prefers-reduced-motion: reduce) {
	.spark-pay-progress__spinner {
		animation: none;
		/* Still visibly "in progress" without motion. */
		border-top-color: var(--spark-accent);
		opacity: 0.85;
	}
}

.spark-pay-panel__secure {
	font-size: 0.78em;
	color: var(--spark-muted);
	text-align: center;
	margin-top: 0.7em;
	line-height: 1.45;
}

/* --- Messages ------------------------------------------------------------ */

.spark-pay-error {
	color: var(--spark-error);
	font-size: 0.88em;
	margin-top: 0.7em;
	line-height: 1.45;
}

.spark-pay-error:empty {
	margin-top: 0;
}

.spark-pay-success {
	margin-top: 1.2em;
	padding: 1em;
	border-radius: var(--spark-radius);
	background: #e8f5ec;
	border: 1px solid #9ccfae;
}

.spark-pay-success[hidden] {
	display: none;
}

.spark-pay-success__text {
	margin: 0;
	font-weight: 600;
	color: #1b5e33;
}

/* --- Admin-only notice --------------------------------------------------- */

/*
 * Only ever rendered to a user with manage_network_options. A visitor gets an
 * empty string, never a placeholder.
 */
.spark-pay-admin-notice {
	border: 2px dashed #b3261e;
	background: #fff5f5;
	color: #7a1a15;
	padding: 0.85em 1em;
	border-radius: var(--spark-radius);
	font-size: 0.88em;
	line-height: 1.5;
	margin: 1em 0;
}


/* --- What is due today (subscriptions) ------------------------------------
 *
 * SP-030. A DEDICATED CLASS, not a restyle of .spark-pay-summary, which the
 * one-time checkout also uses. 0.4.4 lost a debugging cycle to exactly that:
 * a shared rule changed for one component and silently altered another.
 *
 * WHAT IS DUE TODAY LEADS. On a paid trial the recurring amount is NOT the
 * money being taken now, and the Stripe Element never displays a price — so if
 * this block does not say it, nothing on the page does except the assent
 * sentence in small print.
 *
 * SIZES ARE RELATIVE (em) and colours come from tokens, so the block inherits
 * the theme's typography and stays Divi's to control.
 */

.spark-pay-duesummary {
	margin: 0 0 1em;
}

/*
 * THE PLUGIN SETS NO TYPOGRAPHY OR SPACING ON THE FOUR TEXT LINES BELOW.
 *
 * No font-size, no weight, no colour, no margin. Every one is a single-class
 * selector with no !important, so a Divi Custom CSS rule overrides it without
 * a specificity fight. Operator direction 2026-08-27: "I'd like to style the
 * text on my own with css inside the divi element", including spacing.
 *
 * The trade is honest and worth stating: until CSS is added these render at
 * the theme's default paragraph size, so the hierarchy will look flat. That is
 * the cost of the plugin not guessing.
 *
 * The margin reset below is not styling — it removes the theme's default
 * paragraph margins so the operator is spacing from zero rather than fighting
 * whatever Divi inherited.
 */
.spark-pay-duesummary__name,
.spark-pay-duesummary__primary,
.spark-pay-duesummary__secondary,
.spark-pay-duesummary__note {
	margin: 0;
}

.spark-pay-duesummary__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
}

/*
 * Hidden when the plan has no trial, because there is no first-charge date to
 * give. Revealed by trial length alone — never by a click. See SP-030.
 */
.spark-pay-duesummary__note[hidden] {
	display: none;
}

/* --- Subscription plan cards --------------------------------------------- */

/*
 * OPERATOR-SPECIFIED, 2026-08-26, against a design confirmed in an earlier
 * session and recovered at spark-pay/design/hosting-plan-cards.reference.html.
 *
 * EVERY COLOUR HERE IS AN EXISTING TOKEN. #c0186f, #8d0f4f, #b1bdcd and
 * #0999a7 were already the plugin's accent, accent-hover, disabled and line
 * colours, so this rewrite introduces NO new palette values and redefines
 * nothing. That matters: 0.4.4 lost a debugging cycle when --spark-accent was
 * redefined and silently turned the agreement scroll box's focus ring pink. A
 * restyle that adds no tokens cannot cause that class of fault.
 *
 * WIDTH IS 100% AND SIZING IS DIVI'S JOB. The plugin sets no max-width, no
 * breakpoints and no column count — that is the principle established in
 * 0.4.5 after three rounds were lost to a plugin stylesheet overruling the
 * page builder. The cards flex-wrap with a min-width so they sit side by side
 * in a wide column and stack in a narrow one, without this file inventing
 * breakpoints that disagree with Divi's.
 *
 * TYPOGRAPHY IS NOT SET HERE, ALSO DELIBERATELY. Each line carries its own
 * class and inherits font, size and colour from the theme, so the operator
 * styles them from Divi rather than fighting this file. The only type rules
 * below are structural (line-height, margins).
 */

.spark-pay-plans {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: stretch;
	width: 100%;
	margin: 0 0 1.5rem;
}

.spark-pay-plan {
	flex: 1 1 240px;
	min-width: 240px;
	background: transparent;
	border-radius: var(--spark-box-radius);   /* 15px, matching the rest of the site */
	overflow: hidden;                          /* clips the ribbon to the rounded top */
	display: flex;
	flex-direction: column;
}

/*
 * The ribbon is a full-width bar across the top of the card, so the card's TOP
 * border is the ribbon itself. A card with no ribbon text would otherwise sit
 * open at the top, so it gets its top border back via --noribbon.
 */
.spark-pay-plan__ribbon {
	text-align: center;
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	color: #fff;
}

.spark-pay-plan__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.25rem;
	text-align: center;
}

/*
 * Pushes the button to the bottom edge whatever the text above it, so two
 * cards with different amounts of copy still line their buttons up.
 */
.spark-pay-plan__choose {
	margin-top: auto;
	width: 100%;
	padding: 11px;
	border-radius: var(--spark-radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/*
 * THE PLUGIN SETS NO TYPOGRAPHY OR SPACING HERE EITHER, and these classes are
 * deliberately DISTINCT from the .spark-pay-duesummary__* set so the cards and
 * the chosen-plan summary can be styled independently. Operator direction,
 * 2026-08-27: "they need to be different than the monthly/yearly cards."
 *
 * The margin reset removes the theme's paragraph defaults so spacing starts
 * from zero. Nothing else is set.
 */
.spark-pay-plan__name,
.spark-pay-plan__price,
.spark-pay-plan__interval,
.spark-pay-plan__sub {
	margin: 0;
}

/* --- Emphasis: featured (annual) ----------------------------------------- */

.spark-pay-plan--featured {
	border: 2px solid var(--spark-accent);
	border-top: 0;
}

.spark-pay-plan--featured.spark-pay-plan--noribbon {
	border-top: 2px solid var(--spark-accent);
}

.spark-pay-plan--featured .spark-pay-plan__ribbon {
	background: var(--spark-accent);
}

.spark-pay-plan--featured .spark-pay-plan__choose {
	background: var(--spark-accent);
	border: 1px solid var(--spark-accent);
	color: var(--spark-accent-text);
}

.spark-pay-plan--featured .spark-pay-plan__choose:hover {
	background: var(--spark-accent-hover);
	border-color: var(--spark-accent-hover);
}

/* --- Emphasis: muted (monthly), and normal until it has its own -----------
 *
 * `normal` deliberately shares this block. It is the default value on a new
 * plan version and has no agreed treatment yet (operator, 2026-08-26: "i
 * haven't worked out what normal would look like"), so it renders as the
 * quieter of the two decided styles. An unstyled third state would otherwise
 * appear the first time someone adds a plan without setting emphasis.
 */

.spark-pay-plan--muted,
.spark-pay-plan--normal {
	border: 1px solid var(--spark-disabled);
	border-top: 0;
}

.spark-pay-plan--muted.spark-pay-plan--noribbon,
.spark-pay-plan--normal.spark-pay-plan--noribbon {
	border-top: 1px solid var(--spark-disabled);
}

.spark-pay-plan--muted .spark-pay-plan__ribbon,
.spark-pay-plan--normal .spark-pay-plan__ribbon {
	background: var(--spark-line);
}

.spark-pay-plan--muted .spark-pay-plan__choose,
.spark-pay-plan--normal .spark-pay-plan__choose {
	background: transparent;
	border: 1px solid var(--spark-disabled);
	color: inherit;
}

.spark-pay-plan--muted .spark-pay-plan__choose:hover,
.spark-pay-plan--normal .spark-pay-plan__choose:hover {
	background: var(--spark-disabled);
	border-color: var(--spark-disabled);
	/* Inherited text is dark; against the filled grey it needs to flip. */
	color: #fff;
}

.spark-pay-plans[hidden],
.spark-pay-chosen[hidden] {
	display: none;
}

/*
 * "Change" is deliberately quiet. It must exist — a buyer who picked the wrong
 * interval and cannot get back would simply leave — but it should not compete
 * with the call to action beneath it.
 */
.spark-pay-chosen__change {
	margin-left: 0.6em;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 0.72em;
	/*
	 * Accent rather than muted grey, at REST and not only on hover. It reads as
	 * a link that way, which matters more than restraint here: a buyer who
	 * picked the wrong interval and cannot see the way back simply leaves.
	 */
	color: var(--spark-accent);
	text-decoration: underline;
	cursor: pointer;
}

.spark-pay-chosen__change:hover {
	color: var(--spark-accent-hover);
}


/* --- Account and cancellation (phase 6) ----------------------------------
 *
 * Same division as everywhere else: the plugin owns STRUCTURE, Divi owns
 * appearance. No font-size, weight or colour on any text line, so operator CSS
 * wins without a specificity fight (ADR-075 era decision, carried forward).
 */

/* --- The "check your email" state -----------------------------------------
 *
 * REPLACES the lookup form rather than sitting under it. The operator's report
 * on the first version: "it looks like the page blinks and nothing happens
 * unless you're looking extremely carefully." A faint line beneath a form that
 * still invites input reads as no change, and someone who believes nothing
 * happened submits again — burning their 3-per-hour allowance for nothing.
 *
 * Deliberately louder than the surrounding page: accent border, tinted panel,
 * and a heading. This is the only feedback the customer gets, because the
 * response is identical whether or not the address is known — so it has to be
 * impossible to miss.
 */

/* --- The cancelled state -------------------------------------------------
 *
 * ONE CLASS PER LINE, and the plugin sets NO typography or spacing on any of
 * them. Same division as the plan cards and the due-today block: the plugin
 * owns structure, Divi owns appearance. The margin reset is not styling — it
 * removes the theme's paragraph defaults so spacing starts from zero rather
 * than from whatever was inherited.
 *
 * Expect it to look flat until CSS is added. That is the plugin declining to
 * guess, not a defect.
 *
 *   .spark-pay-cancel__doneheading   "Your plan is cancelled"
 *   .spark-pay-cancel__doneline      the date service runs to
 *   .spark-pay-cancel__resumenote    what resuming actually does
 *   .spark-pay-cancel__resume        the button
 */

.spark-pay-cancel__doneheading,
.spark-pay-cancel__doneline,
.spark-pay-cancel__resumenote {
	margin: 0;
}

/* --- The cancel choice ----------------------------------------------------
 *
 * TWO ACTIONS ON ONE LINE, centred. The button colours are NOT set here: the
 * existing .spark-pay-cancel__confirm rules further down already make cancel
 * an outline button and every other action the accent pink, and duplicating
 * them here would create two sets fighting over the same element. This block
 * adds only the layout and the one new element.
 *
 * Wraps on a narrow screen rather than shrinking, because two cramped buttons
 * side by side is how someone taps the wrong one.
 */

.spark-pay-cancel__choice {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 0.75em;
	margin: 1.2em 0 0;
}

/*
 * KEEPING IS THE PRIMARY ACTION and takes the accent, matching how that colour
 * reads everywhere else in the plugin. It is an anchor rather than a button
 * because nothing has been cancelled yet — there is nothing to undo, so this
 * is a way out of the page, not an operation.
 */
/*
 * AN ANCHOR SIZED LIKE A BUTTON needs saying explicitly. A <button> and an <a>
 * do not share a box model: browsers give buttons their own default padding,
 * border and box-sizing, so an anchor with matching padding renders about a
 * pixel taller and its text sits above the optical centre. inline-flex with
 * centred content fixes the alignment; box-sizing on BOTH fixes the height.
 */
.spark-pay-cancel__confirm,
.spark-pay-cancel__keep {
	box-sizing: border-box;
}

.spark-pay-cancel__keep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75em 1.4em;
	border-radius: var(--spark-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: var(--spark-accent);
	border: 1px solid var(--spark-accent);
	color: var(--spark-accent-text);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.spark-pay-cancel__keep:hover {
	background: var(--spark-accent-hover);
	border-color: var(--spark-accent-hover);
	color: var(--spark-accent-text);
}

/*
 * The terms sit BELOW the buttons now, so they read as a consequence of the
 * choice rather than as a preamble to it.
 */
.spark-pay-cancel__terms {
	text-align: center;
	margin-top: 1em;
}

.spark-pay-lookup__progress {
	margin: 0.9em 0 0;
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--spark-muted);
}

.spark-pay-lookup__progress[hidden] {
	display: none;
}

.spark-pay-lookup__form[hidden],
.spark-pay-lookup__sent[hidden] {
	display: none;
}

.spark-pay-lookup__sent {
	border: 2px solid var(--spark-accent);
	border-radius: var(--spark-box-radius);
	padding: 1.4em 1.3em;
	margin: 0 0 1em;
	background: rgba( 192, 24, 111, 0.04 );
}

.spark-pay-lookup__sentheading {
	margin: 0 0 0.4em;
	font-weight: 700;
	color: var(--spark-accent);
}

.spark-pay-lookup__senttext {
	margin: 0;
	line-height: 1.5;
}

.spark-pay-account__block[hidden],
.spark-pay-account__result:empty {
	display: none;
}

.spark-pay-account__heading,
.spark-pay-account__lede,
.spark-pay-account__aside,
.spark-pay-account__notice,
.spark-pay-account__item,
.spark-pay-account__result {
	margin: 0;
}

.spark-pay-account__lede,
.spark-pay-account__notice {
	margin-bottom: 1em;
}

.spark-pay-account__heading {
	margin-bottom: 0.6em;
}

/*
 * A notice, not an alarm. Someone whose link expired has done nothing wrong,
 * and red would suggest otherwise.
 */
.spark-pay-account__notice {
	border-left: 2px solid var(--spark-line);
	padding-left: 0.7em;
}

.spark-pay-account__list {
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
}

.spark-pay-account__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1em;
	align-items: baseline;
	padding: 0.7em 0;
	border-bottom: 1px solid var(--spark-disabled);
}

/*
 * THE WHITE CARD, SCOPED TO THE SIGNED-IN VIEWS ONLY.
 *
 * .spark-pay-account is shared with the CANCEL page and with the account
 * sign-in form, so styling that class would change the email-form page - the
 * exact thing the operator wanted to avoid by not doing this in Divi. The
 * --card modifier is carried only by the signed-in table and the detail view.
 *
 * The card exists because the row separators disappeared against the patterned
 * page background. Requested by the operator 2026-08-29 with the radius and
 * colour specified.
 */
.spark-pay-account--card {
	background: #fff;
	border-radius: 15px;
	padding: 1.75em;
}

/*
 * ADR-082: every purchase and plan as its own block, newest first.
 *
 * NOT A TABLE. A table earns its keep when you scan DOWN a column comparing
 * like with like, and nobody compares their hosting plan against their website
 * purchase. With a realistic account - a site, hosting, local SEO, maintenance,
 * or a handful of courses on another brand - the columns aligned things that
 * had no relationship to each other and the eye could not find the boundary
 * between one purchase and the next.
 *
 * The block is also what the phone layout was already doing, so there is now
 * ONE design at every width instead of a table plus a stacking override.
 *
 * Colours are the plugin's existing tokens: --spark-disabled is the #b1bdcd the
 * operator picked, and --spark-box-radius is the 15px. Reversible (SP-031).
 */
/*
 * TYPOGRAPHY ACROSS THE CUSTOMER PAGES: DM Sans for headings, Inter for body.
 * Requested by the operator 2026-08-29. Divi already serves both fonts on
 * these pages, so nothing here loads one.
 *
 * .spark-pay-account is the wrapper on ALL FOUR customer views - the purchase
 * list, the detail view, the cancel page and the sign-in form - so setting the
 * body face here reaches every one of them, which is what was asked for.
 *
 * NOTE FOR WHOEVER STYLES THESE NEXT: the sign-in form and the cancel page's
 * lookup form are CLASS-IDENTICAL. Both render spark-pay-lookup__form, __email,
 * __send, __sent, __sentheading and __senttext inside spark-pay-account. There
 * is no selector that separates them, so a rule written for one WILL hit the
 * other. If they ever need to differ, add a modifier to the wrapper the way
 * .spark-pay-account--card did, rather than reaching for a parent selector.
 *
 * __sentheading is a <p> acting as a heading, which is why it is grouped with
 * the headings here rather than with the body text.
 */
.spark-pay-account {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/*
 * The sign-in form and the cancel lookup form are ENTIRELY Inter: their only
 * heading-like element is __sentheading, which is a <p>, so the operator's
 * decision on 2026-08-29 was to leave those pages as body text throughout.
 * DM Sans is for real headings and for the purchase list's names and prices.
 */
.spark-pay-account__heading,
.spark-pay-account__title {
	font-family: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/*
 * TYPOGRAPHY, requested by the operator 2026-08-29: item names and prices in DM
 * Sans, everything else in Inter.
 *
 * SCOPED TO THE PURCHASE LIST, not to .spark-pay-account, because that class is
 * shared with the cancel page and the sign-in form and neither was asked for.
 *
 * NOTHING HERE LOADS A FONT. If the theme does not already serve DM Sans and
 * Inter, the browser falls through to the stack and nothing visible changes.
 * Enqueuing them from the plugin would add a third-party request to every page
 * carrying the shortcode, which is a decision for the operator, not a detail.
 */
.spark-pay-account__items,
.spark-pay-account__items .spark-pay-account__date,
.spark-pay-account__items .spark-pay-account__meta,
.spark-pay-account__items .spark-pay-account__view {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.spark-pay-account__items .spark-pay-account__name,
.spark-pay-account__items .spark-pay-account__plan {
	font-family: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.spark-pay-account__items {
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.spark-pay-account__purchase {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1.5em;
	align-items: flex-start;
	justify-content: space-between;
	background: #fff;
	border: 1px solid var(--spark-disabled);
	border-radius: var(--spark-box-radius);
	padding: 1.1em 1.25em;
}

.spark-pay-account__purchase-main {
	flex: 1 1 16em;
	min-width: 0;
}

/*
 * The price and the action sit together, because they are the two things a
 * customer looks for: what it costs, and how to change it.
 *
 * NO BREAKPOINT. Wrapping is done by flex-basis on the main column, so this
 * group drops onto its own line when the CONTAINER is too narrow rather than
 * when the VIEWPORT is - which is the correct behaviour inside a Divi column,
 * and avoids reintroducing the invented breakpoints removed in 0.4.5. A plugin
 * stylesheet that sets layout breakpoints is a constraint the operator cannot
 * find in Divi, because it is not in Divi.
 */
.spark-pay-account__purchase-side {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 1em;
	flex: 0 1 auto;
	margin-left: auto;
}

.spark-pay-account__purchase .spark-pay-account__name {
	margin: 0 0 0.2em;
	font-size: 1.05em;
	line-height: 1.3;
}

.spark-pay-account__purchase .spark-pay-account__date {
	margin: 0;
	white-space: nowrap;
	color: var(--spark-muted);
}

.spark-pay-account__purchase .spark-pay-account__meta {
	margin: 0.35em 0 0;
	color: var(--spark-muted);
}

.spark-pay-account__note {
	display: block;
}

.spark-pay-account__purchase .spark-pay-account__plan {
	font-weight: 600;
	white-space: nowrap;
}

/*
 * An OUTLINE button, not a filled one. The filled accent belongs to the action
 * the page wants you to take, and on this page that is not "View". The operator
 * is still deciding the button treatment, so this borrows the existing tokens
 * rather than introducing a colour.
 */
.spark-pay-account__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45em 1.1em;
	border: 1px solid var(--spark-disabled);
	border-radius: var(--spark-radius);
	text-decoration: none;
	white-space: nowrap;
	color: var(--spark-line);
}

.spark-pay-account__view:hover,
.spark-pay-account__view:focus {
	border-color: var(--spark-line);
	color: var(--spark-line);
}

.spark-pay-account__fallback {
	margin: 1.5em 0 0;
}

.spark-pay-account__back {
	margin: 0 0 1em;
}

.spark-pay-account__facts {
	margin: 0 0 1.25em;
}

.spark-pay-account__facts dt {
	font-weight: 600;
	margin: 0.9em 0 0.15em;
}

.spark-pay-account__facts dd {
	margin: 0;
}

/*
 * The receipt and intake-form links on the detail view, in the brand teal -
 * the same --spark-line the View button and the quiet link in the emails use.
 * Set on hover and focus too, or the theme's link colour takes over the moment
 * the pointer crosses them.
 */
.spark-pay-account__links a {
	color: var(--spark-line);
}

/*
 * The detail view's "Back to my purchases" sits in its OWN wrapper, not in
 * __links, so the rule above never reached it and the theme's link colour won
 * — it rendered purple against teal everywhere else on the same page.
 */
.spark-pay-account__back a,
.spark-pay-account__back a:hover,
.spark-pay-account__back a:focus {
	color: var(--spark-line);
}

.spark-pay-account__links a:hover,
.spark-pay-account__links a:focus {
	color: var(--spark-line);
}

.spark-pay-account__consent {
	display: block;
	color: var(--spark-muted);
}

/* Visible to screen readers only; the "View" link needs to say what it views. */
.spark-pay-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.spark-pay-account__status,
.spark-pay-account__name {
	font-weight: 600;
}

.spark-pay-account__plan,
.spark-pay-account__meta {
	opacity: 0.8;
}

/*
 * A STYLING HOOK, DELIBERATELY UNSTYLED. past_due and unpaid rows carry
 * .spark-pay-account__meta--attention so the operator can make them stand out
 * in Divi. The plugin sets no colour here: colour is a presentation decision
 * and belongs to the operator (SP-031), and a red the theme did not choose is
 * the kind of thing that gets reversed on sight.
 */

.spark-pay-cancel__confirm,
.spark-pay-lookup__send,
.spark-pay-account__portal,
.spark-pay-cancel__resume {
	padding: 0.75em 1.4em;
	border-radius: var(--spark-radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	background: var(--spark-accent);
	border: 1px solid var(--spark-accent);
	color: var(--spark-accent-text);
}

.spark-pay-cancel__confirm:hover,
.spark-pay-lookup__send:hover,
.spark-pay-account__portal:hover,
.spark-pay-cancel__resume:hover {
	background: var(--spark-accent-hover);
	border-color: var(--spark-accent-hover);
}

/*
 * CANCELLING IS NOT THE CALL TO ACTION. It is an outline button so the page
 * does not read as encouragement to leave — while still being obvious, because
 * a hidden cancel button is what produces chargebacks.
 */
.spark-pay-cancel__confirm {
	background: transparent;
	border-color: var(--spark-disabled);
	color: inherit;
}

.spark-pay-cancel__confirm:hover {
	background: var(--spark-disabled);
	border-color: var(--spark-disabled);
	color: #fff;
}

.spark-pay-account__aside {
	margin-top: 0.8em;
	opacity: 0.8;
}

button[disabled] {
	opacity: 0.75;
	cursor: progress;
}

/* ---------------------------------------------------------------------------
 * KEYBOARD FOCUS RING — every customer-facing control, all four views.
 *
 * A CONTROL YOU CAN REACH BUT CANNOT SEE YOU HAVE REACHED IS UNREACHABLE.
 * Found by the operator, 2026-08-30, tabbing through the live cancel page:
 * the buttons had hover, active and disabled states and NO focus state at all.
 * The email field only looked focused because of its own box-shadow rule.
 *
 * IT CANNOT DEPEND ON THE SITE'S ACCESSIBILITY WIDGET. That widget is opt-in,
 * and its stylesheet reaches links and form fields but not <button> — which is
 * why the send button showed nothing even with outline focus switched on. A
 * visitor tabbing through the cancel page with default settings gets whatever
 * is in THIS file and nothing else.
 *
 * RED, MATCHING THE REST OF THE SITE (#e90000), by operator decision
 * 2026-08-30. --spark-error is also red; they do not read as the same thing in
 * use, because an error is a filled message block and this is a hollow ring
 * around the thing you are standing on.
 *
 * OUTLINE, NOT BORDER, so it costs no layout and cannot shift the page as
 * focus moves. outline-offset is what holds it off the control instead of
 * hugging its edge.
 *
 * :focus-visible, NOT :focus, so a mouse click does not draw it. Same
 * reasoning as the agreement box above.
 *
 * TEXT INPUTS ARE DELIBERATELY EXCLUDED. A text input matches :focus-visible
 * even when CLICKED — it is the one element type where the browser assumes a
 * ring is wanted — so including them drew the ring on a mouse click, which is
 * exactly what this is not for. The fields keep their own focus treatment
 * below (accent border and a soft glow), which is subtler, shows on both mouse
 * and keyboard, and is what the operator wanted kept.
 *
 * SO THE RING IS FOR THINGS YOU ACTIVATE, not things you type into: links,
 * buttons, and anything given a tabindex.
 * --------------------------------------------------------------------------- */

.spark-pay-checkout :is( a, button, summary, [tabindex] ):focus-visible,
.spark-pay-agreement :is( a, button, summary, [tabindex] ):focus-visible,
.spark-pay-subscribe :is( a, button, summary, [tabindex] ):focus-visible,
.spark-pay-account :is( a, button, summary, [tabindex] ):focus-visible {
	outline: 2px solid var(--spark-focus);
	outline-offset: 2px;
	border-radius: inherit;
}


/* ===========================================================================
 * THE /cancel/ STATE FURNITURE  (SP-069, ADR-093)
 * ===========================================================================
 *
 * THIS IS THE ONE PLACE THE PLUGIN SETS TYPOGRAPHY ON CUSTOMER-FACING TEXT,
 * and the exception is structural rather than a change of taste.
 *
 * Operator direction 2026-08-27 was that the plugin sets no font-size, weight
 * or colour on customer text, so operator CSS wins without a specificity
 * fight. That holds everywhere else and is still asserted as an ABSENCE on the
 * plan cards and the due-today block in test-phase5-subscribe.php.
 *
 * It cannot hold here. The Divi template for /cancel/ renders ONE heading and
 * sub-line above FOUR shortcode states, and the swap between them happens
 * client-side after a POST - so the theme cannot know which state it is
 * sitting above, and no external stylesheet can style them per state. The
 * consequence on the live page was "Are You Sure? / Your website will be
 * deactivated at the end of your payment period" shown above the email lookup
 * form, to a customer who had lost their cancel link and typed nothing yet.
 *
 * So the plugin owns these four headings, the Divi ones come off the page, and
 * the values below are the operator's own scale from CANCEL-PAGE-HEADINGS.md.
 *
 * PX, NOT REM. rem resolves against Divi's root font-size inside the theme and
 * against the browser's inside the plugin. The two are not reliably the same,
 * so the identical value would render at two different sizes on one page.
 * This is the whole reason the values were converted.
 *
 * THE FONTS ARE DIVI'S. Referenced by family name with a fallback; they are
 * already loaded and must not be enqueued again.
 *
 * BREAKPOINTS ARE DIVI'S OWN - 980px and 767px - so the plugin and the theme
 * step down together rather than at different widths.
 * --------------------------------------------------------------------------- */

.spark-pay-cancel__heading,
.spark-pay-cancel__lookupheading,
.spark-pay-cancel__askheading,
.spark-pay-cancel__doneheading,
.spark-pay-cancel__runningheading {
	margin: 0 0 0.2em;
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 67.2px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--spark-heading);
}

/*
 * SENTENCE CASE, which is why this is 17px rather than 16px: caps occupy more
 * visual height at the same size, so the sentence-case version reads smaller.
 */
.spark-pay-cancel__subline,
.spark-pay-cancel__lookupsub,
.spark-pay-cancel__asksub,
.spark-pay-cancel__donesub,
.spark-pay-cancel__runningsub {
	margin: 0 0 1.1em;
	font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	color: var(--spark-line);
}

/*
 * TABLET. The heading drops 67.2 to 40 and THE SUB-LINE DOES NOT MOVE, so the
 * two sit closer together here than on desktop. That was chosen with the
 * consequence pointed out, not inherited by accident - which is why there is
 * no sub-line rule in this block rather than a rule repeating 17px.
 *
 * 40px WAS CHOSEN, NOT MEASURED. DevTools would not give a trustworthy
 * computed value, most likely because no tablet rule exists in Divi at all and
 * the heading shrinks only because rem resolves against a smaller root at that
 * width - which the plugin cannot reproduce, and which is why px was
 * necessary. If it looks wrong on the device it is a design call to revisit,
 * not a transcription error to hunt.
 */
@media (max-width: 980px) {

	.spark-pay-cancel__heading,
	.spark-pay-cancel__lookupheading,
	.spark-pay-cancel__askheading,
	.spark-pay-cancel__doneheading,
	.spark-pay-cancel__runningheading {
		font-size: 40px;
	}
}

/*
 * PHONE. TRACKING IS TWO VALUES, NOT ONE, because it does not scale with font
 * size: 1px on a 15px line is proportionally twice what it is on a 30px one,
 * and lowercase at small sizes is where over-tracking starts to look unglued.
 */
@media (max-width: 767px) {

	.spark-pay-cancel__heading,
	.spark-pay-cancel__lookupheading,
	.spark-pay-cancel__askheading,
	.spark-pay-cancel__doneheading,
	.spark-pay-cancel__runningheading {
		font-size: 32.6px;
	}

	.spark-pay-cancel__subline,
	.spark-pay-cancel__lookupsub,
	.spark-pay-cancel__asksub,
	.spark-pay-cancel__donesub,
	.spark-pay-cancel__runningsub {
		font-size: 15px;
		letter-spacing: 0.5px;
	}
}