body{font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;font-size:15px}h1,h2,h3,h4,.wp-block-heading,.hero-main h1,.ho-headline,.fv-h,.mc-h,.side-h,.footer-heading,.fcol-h{font-family:Georgia, 'Times New Roman', Times, serif}.container{max-width:1040px}.card{margin-block-end:14px;padding:14px}.content-main p,.content-main ul,.content-main ol,.content-main table{margin-block-end:10px}.card,.btn,.btn-xl,.callout,.fact-tile,.hero-offer,.mid-cta,.final-verdict,.side,.chip,.wp-block-image img,.gallery img.shot,.hero-shot img,.promo,.bonus-card{border-radius:10px}.card{background:#F7F8FA;border:1px solid #EDEFF3;box-shadow:none}.content-main h2,.content-main .wp-block-heading{border-inline-start:4px solid #337ab7;padding-inline-start:11px}.content-main ul,.content-main .wp-block-list{list-style:none;padding-inline-start:0}.content-main ul li,.content-main .wp-block-list li{position:relative;padding-inline-start:22px}.content-main ul li,.content-main .wp-block-list li::before{content:'-';position:absolute;inset-inline-start:0;color:#337ab7;font-weight:700}.wp-block-table table tbody tr:nth-child(even){background:#F7F8FA}.wp-block-table table td,.wp-block-table table th{border:0;border-block-end:1px solid #EDEFF3}.hero-offer{border-radius:0}.callout{border:0;background:color-mix(in srgb,#337ab7 8%,#fff)}@media(max-width:860px){.layout{display:block}.layout>.content-main,.layout>.sidebar{order:initial;max-width:100%;position:static;padding-block-start:0}.layout>.sidebar{margin-block-start:22px;display:block}.hero-grid{display:block;text-align:start}.hero-main{max-width:100%;margin-inline:0}.hero .hero-offer{display:block;margin:18px 0 0;max-width:100%}.hero-badge,.hero-byline{justify-content:flex-start}.header .flexbox{flex-wrap:wrap}.header .navigation{margin-inline:0}}@media(max-width:620px){body{font-size:15px}.card{padding:14px;margin-block-end:14px}.container{max-width:100%}.hero-offer{border-radius:10px}}.pay-icons{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 20px}.pi-cell{display:flex;flex-direction:column;align-items:center;gap:6px;width:74px;text-align:center}.pi-cell svg{background:#F5F6F8;border-radius:12px;padding:9px;box-sizing:border-box;width:48px;height:48px}.pi-label{font-size:11.5px;line-height:1.25;color:#5A6069;font-weight:600}@media(max-width:620px){.pi-cell{width:64px}.pi-cell svg{width:44px;height:44px}}
/* theme */
/*
 * Ref Theme 1 — section layout rules.
 *
 * This sheet only holds what the block editor cannot express on its own:
 * grids, pseudo-element connectors, automatic step numbering, table column
 * emphasis and the decorative shells behind the registered block styles.
 * Colours, font sizes, gaps and padding stay on the blocks themselves so they
 * remain editable, and every value below resolves to a theme.json token so
 * Global Styles restyles the whole theme.
 *
 * Loaded on the front end and, via add_editor_style(), in both editors.
 */

/* --------------------------------------------------------------------------
 * 1. Primitives
 * -------------------------------------------------------------------------- */

/* Vertical rhythm shared by every section pattern. */
.rl-section {
	padding-block: var(--wp--preset--spacing--60);
}

/* Uppercase micro-label used for eyebrows, stat labels and column headings. */
.rl-eyebrow {
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	font-weight: 600;
}

/* A single glyph sitting next to its label. Inherits colour so it follows
   whatever text colour the surrounding block is set to. */
.rl-icon {
	flex: 0 0 auto;
	line-height: 1.2;
}

.rl-icon--positive {
	color: var(--wp--preset--color--positive);
}

.rl-icon--critical {
	color: var(--wp--preset--color--critical);
}

.rl-icon--caution {
	color: var(--wp--preset--color--caution);
}

.rl-icon--accent {
	color: var(--wp--preset--color--accent);
}

/* Available to scripts that need to announce something without showing it. */
.rl-sr-only {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Visible focus everywhere, including the FAQ summaries. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: var(--wp--custom--stroke--medium) solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * 2. Registered block styles
 * -------------------------------------------------------------------------- */

.wp-block-group.is-style-rl-card {
	background-color: var(--wp--preset--color--base);
	border: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-rl-panel {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-rl-inverse {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--60);
}

/* Headings and plain links inherit inside an inverse block; buttons keep
   their own palette. */
.is-style-rl-inverse :where(h1, h2, h3, h4, h5, h6),
.is-style-rl-inverse :where(a:not(.wp-block-button__link)) {
	color: inherit;
}

.wp-block-list.is-style-rl-leadin,
.wp-block-list.is-style-rl-value {
	padding-inline-start: var(--wp--preset--spacing--40);
}

.wp-block-list.is-style-rl-leadin > li,
.wp-block-list.is-style-rl-value > li {
	margin-block-end: var(--wp--preset--spacing--20);
}

.wp-block-list.is-style-rl-leadin > li::marker {
	color: var(--wp--preset--color--accent);
}

.wp-block-list.is-style-rl-plain {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-rl-plain > li {
	margin-block-end: var(--wp--preset--spacing--10);
}

.wp-block-list.is-style-rl-value {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-rl-value > li {
	border-inline-start: var(--wp--custom--stroke--accent-bar) solid var(--wp--preset--color--accent-soft);
	padding-inline-start: var(--wp--preset--spacing--30);
}

.wp-block-list.is-style-rl-value > li strong {
	color: var(--wp--preset--color--accent);
}

.wp-block-image.is-style-rl-framed img {
	inline-size: 100%;
	block-size: auto;
	border: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--soft);
}

.wp-block-image.is-style-rl-framed figcaption {
	text-align: start;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* --------------------------------------------------------------------------
 * 3. Header and footer
 * -------------------------------------------------------------------------- */

.rl-header {
	border-block-end: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
}

.rl-footer {
	border-block-start: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
}

/* Round "18+" chip in the footer bottom row. */
.rl-agegate {
	display: inline-grid;
	place-items: center;
	inline-size: var(--wp--custom--icon--lg);
	block-size: var(--wp--custom--icon--lg);
	border: var(--wp--custom--stroke--medium) solid currentColor;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 700;
	line-height: 1;
}

/* --------------------------------------------------------------------------
 * 4. Breadcrumbs
 * -------------------------------------------------------------------------- */

.rl-breadcrumbs__sep {
	opacity: 0.55;
}

/* --------------------------------------------------------------------------
 * 5. Hero, badges and the offer card
 * -------------------------------------------------------------------------- */

.rl-rating {
	border-radius: var(--wp--custom--radius--pill);
}

.rl-stars {
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.rl-badge {
	border: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
}

.rl-offer {
	border: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.rl-offer__flag {
	border-radius: var(--wp--custom--radius--pill);
}

/* Bonus-code field: dashed ticket edge around the code and its copy button. */
.rl-code {
	border: var(--wp--custom--stroke--hairline) dashed var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
}

.rl-code__value {
	letter-spacing: 0.12em;
	font-weight: 700;
}

button.rl-code__copy,
button.wp-block-button__link {
	cursor: pointer;
	appearance: none;
	border-style: none;
}

/* --------------------------------------------------------------------------
 * 6. Payment methods
 * -------------------------------------------------------------------------- */

.rl-payment img {
	block-size: var(--wp--custom--logo--height);
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
 * 7. Callouts
 * -------------------------------------------------------------------------- */

.rl-callout {
	border-inline-start: var(--wp--custom--stroke--accent-bar) solid transparent;
	border-radius: var(--wp--custom--radius--sm);
}

.rl-callout--warning {
	border-inline-start-color: var(--wp--preset--color--caution);
}

.rl-callout--tip {
	border-inline-start-color: var(--wp--preset--color--positive);
}

/* --------------------------------------------------------------------------
 * 8. Pros and cons
 * -------------------------------------------------------------------------- */

.rl-pc--pros {
	border-block-start: var(--wp--custom--stroke--accent-bar) solid var(--wp--preset--color--positive);
}

.rl-pc--cons {
	border-block-start: var(--wp--custom--stroke--accent-bar) solid var(--wp--preset--color--critical);
}

/* --------------------------------------------------------------------------
 * 9. Data tables
 * -------------------------------------------------------------------------- */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	inline-size: 100%;
	min-inline-size: var(--wp--custom--table--min-width);
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--wp--preset--spacing--30);
	text-align: start;
	vertical-align: top;
	border: 0;
	border-block-end: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	border-block-end-width: var(--wp--custom--stroke--medium);
}

.wp-block-table.is-style-rl-emphasis-2 th:nth-child(2),
.wp-block-table.is-style-rl-emphasis-2 td:nth-child(2),
.wp-block-table.is-style-rl-emphasis-3 th:nth-child(3),
.wp-block-table.is-style-rl-emphasis-3 td:nth-child(3) {
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wp-block-table figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* --------------------------------------------------------------------------
 * 10. Wide CTA banner
 * -------------------------------------------------------------------------- */

.rl-chip {
	border: var(--wp--custom--stroke--hairline) dashed currentColor;
	border-radius: var(--wp--custom--radius--pill);
}

/* --------------------------------------------------------------------------
 * 11. Numbered steps
 *
 * The marker is a CSS counter rather than typed-in text: the spec requires the
 * numbering to stay correct when an editor adds, removes or reorders a step,
 * which typed numbers cannot guarantee. Everything an editor authors — the
 * step title and its description — is a normal editable block.
 * -------------------------------------------------------------------------- */

.rl-steps {
	counter-reset: rl-step;
}

.rl-step {
	counter-increment: rl-step;
	position: relative;
	padding-inline-start: calc(var(--wp--custom--icon--lg) + var(--wp--preset--spacing--30));
}

.rl-step::before {
	content: counter(rl-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	display: grid;
	place-items: center;
	inline-size: var(--wp--custom--icon--lg);
	block-size: var(--wp--custom--icon--lg);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1;
}

/* Connector between consecutive steps. Decorative only. */
.rl-step:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--wp--custom--icon--lg) / 2);
	inset-block-start: var(--wp--custom--icon--lg);
	inset-block-end: calc(var(--wp--preset--spacing--40) * -1);
	border-inline-start: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
}

/* --------------------------------------------------------------------------
 * 12. FAQ accordion (core Details block, no JavaScript)
 * -------------------------------------------------------------------------- */

.wp-block-details.is-style-rl-boxed {
	background-color: var(--wp--preset--color--base);
	border: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-details.is-style-rl-boxed > summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	padding-inline-end: var(--wp--custom--icon--md);
}

.wp-block-details.is-style-rl-boxed > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-rl-boxed > summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 0.35em;
	inline-size: 0.5em;
	block-size: 0.5em;
	border-inline-end: var(--wp--custom--stroke--medium) solid var(--wp--preset--color--accent);
	border-block-end: var(--wp--custom--stroke--medium) solid var(--wp--preset--color--accent);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.wp-block-details.is-style-rl-boxed[open] > summary::after {
	transform: rotate(-135deg);
	inset-block-start: 0.55em;
}

/* --------------------------------------------------------------------------
 * 12b. Related-link cards
 *
 * The title link is stretched over the whole card, so the entire surface is
 * the click target while the link stays the only focusable element and keeps
 * its own accessible name. Focus is drawn on the card rather than on the text.
 * -------------------------------------------------------------------------- */

.rl-linkcard {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

/* Accent rule that sweeps across the top edge on hover. */
.rl-linkcard::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: var(--wp--custom--stroke--accent-bar);
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

[dir="rtl"] .rl-linkcard::before {
	transform-origin: right;
}

.rl-linkcard:hover,
.rl-linkcard:focus-within {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-2px);
}

.rl-linkcard:hover::before,
.rl-linkcard:focus-within::before {
	transform: scaleX(1);
}

.rl-linkcard__title {
	line-height: 1.3;
}

.rl-linkcard__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Stretches the link over the card without nesting blocks inside an anchor. */
.rl-linkcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rl-linkcard:hover .rl-linkcard__title a {
	color: var(--wp--preset--color--accent);
}

/* The outline belongs on the card, since the link fills it. */
.rl-linkcard:focus-within {
	outline: var(--wp--custom--stroke--medium) solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.rl-linkcard__title a:focus-visible {
	outline: none;
}

.rl-linkcard__arrow {
	margin-block-start: auto;
	align-self: flex-end;
	color: var(--wp--preset--color--accent);
	transition: transform 0.2s ease;
}

.rl-linkcard:hover .rl-linkcard__arrow {
	transform: translateX(0.3em);
}

[dir="rtl"] .rl-linkcard:hover .rl-linkcard__arrow {
	transform: translateX(-0.3em);
}

/* --------------------------------------------------------------------------
 * 13. Final verdict
 * -------------------------------------------------------------------------- */

.rl-ring {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: var(--wp--custom--ring--size);
	block-size: var(--wp--custom--ring--size);
	border: var(--wp--custom--ring--thickness) solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--accent-soft);
}

/* Divider between consecutive sub-scores; drops away cleanly when the row
   wraps onto a second line. */
.rl-subscores > * + * {
	border-inline-start: var(--wp--custom--stroke--hairline) solid var(--wp--preset--color--line);
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
 * 14. Reduced motion
 * -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-details.is-style-rl-boxed > summary::after {
		transition: none;
	}

	.rl-linkcard,
	.rl-linkcard::before,
	.rl-linkcard__arrow {
		transition: none;
	}

	.rl-linkcard:hover,
	.rl-linkcard:focus-within {
		transform: none;
	}

	.rl-linkcard:hover .rl-linkcard__arrow {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
 * 15. Shrink-wrapped pills
 *
 * A flex group is a block-level box, so a standalone pill would otherwise
 * stretch the full content width.
 * -------------------------------------------------------------------------- */

.rl-rating,
.rl-code__copy {
	inline-size: fit-content;
}

.rl-ring > * {
	margin-block: 0;
}

/*
Theme Name: Ref Theme 1
Theme URI: 
Author: Dmitry Moiseenko
Author URI: 
Description: A block theme of reusable, order-independent page-section patterns for building review landing pages.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ref-theme-1
Tags: 
*/



/* tokens from the site's theme */
body{background:#ffffff;color:#131a2b;font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif}
h1,h2,h3{font-family:'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif}
.card,.hero-offer,.fact-tile,.side,.faq__item{background:#f5f7fc}
.card,.fact-tile,.faq__item,table,th,td{border-color:#dbe2f1}
.muted,.ho-fine,.hero-meta{color:#5a6685}