/* =============================================================================
   Ratiom CRO — Theme CSS
   Tokens live in theme.json. This file handles layout, components, and
   responsive behavior that can't be expressed as block attributes.
   No Tailwind. No jQuery. No framework dependencies.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Base Reset & Body
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}


html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background-color: #000;
	color: #fff;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	letter-spacing: var(--type-body-ls);
	/* Offset for fixed nav. Home can tune the custom property without duplicating padding rules. */
	padding-top: var(--site-header-height);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---------------------------------------------------------------------------
   2. Layout Utilities
   --------------------------------------------------------------------------- */

.section-container {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.ratiom-section {
	padding-block: var(--space-7);
}

.ratiom-section-header {
	text-align: left;
	max-width: 700px;
	margin-inline: 0;
	margin-bottom: 40px;
}

.ratiom-section-header h2 {
	margin-top: var(--space-2);
	margin-bottom: 0;
}

.ratiom-section-sub {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	letter-spacing: var(--type-body-ls);
	margin: 0;
}

/* Grid systems */
.ratiom-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}

.ratiom-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}

@media (min-width: 640px) {
	.ratiom-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.ratiom-grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ratiom-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   3. Design Tokens as Custom Properties
   --------------------------------------------------------------------------- */

:root {
	/* 8px spacing system */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 128px;
	/* Container */
	--container-max-width: 1240px;
	--container-gutter: 40px;
	--ratiom-icon-size: 28px;
	--ratiom-primary: #c4ee18;
	--ratiom-primary-hover: #d4ff28;
	--ratiom-primary-dim: rgba(196, 238, 24, 0.1);
	--ratiom-primary-border: rgba(196, 238, 24, 0.25);
	--ratiom-primary-glow: 0 0 30px rgba(196, 238, 24, 0.2);
	--ratiom-black: #000;
	--ratiom-card: #111;
	--ratiom-card-hover: #141414;
	--ratiom-border: rgba(255, 255, 255, 0.08);
	--ratiom-border-hover: rgba(196, 238, 24, 0.3);
	--ratiom-text: #fff;
	--ratiom-text-muted: rgba(255, 255, 255, 0.65);
	--ratiom-text-faint: rgba(255, 255, 255, 0.4);
	--ratiom-danger: #f87171;
	--ratiom-radius-sm: 8px;
	--ratiom-radius: 16px;
	--ratiom-radius-lg: 20px;
	--ratiom-radius-full: 9999px;
	--ratiom-transition: 0.2s ease;

	/* ── Global Typography System ────────────────────────────── */
	/* H1 — Hero/Page Primary Heading */
	--type-h1-size:   clamp(4.5rem, 8vw, 7rem);
	--type-h1-weight: 900;
	--type-h1-lh:     0.9;
	--type-h1-ls:     -0.06em;

	/* H2 — Major section headings */
	--type-h2-size:   clamp(2.4rem, 4vw, 4rem);
	--type-h2-weight: 900;
	--type-h2-lh:     0.95;
	--type-h2-ls:     -0.04em;

	/* H3 — Cards / subsections */
	--type-h3-size:   1.5rem;
	--type-h3-weight: 800;
	--type-h3-lh:     1;
	--type-h3-ls:     -0.03em;

	/* Body copy */
	--type-body-size:   1.05rem;
	--type-body-weight: 400;
	--type-body-lh:     1.7;
	--type-body-ls:     -0.01em;
	--type-body-max:    65ch;

	/* Small copy */
	--type-small-size:   0.9rem;
	--type-small-weight: 500;
	--type-small-lh:     1.5;

	/* Eyebrow labels */
	--type-eyebrow-size:   0.72rem;
	--type-eyebrow-weight: 600;
	--type-eyebrow-ls:     0.12em;

	/* Button text */
	--type-btn-size:   0.95rem;
	--type-btn-weight: 700;
	--type-btn-ls:     -0.02em;
	/* ────────────────────────────────────────────────────────── */
}

/* ---------------------------------------------------------------------------
   4. Typography
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	color: #fff;
	margin: 0;
}

h1 {
	font-size: var(--type-h1-size);
	font-weight: var(--type-h1-weight);
	line-height: var(--type-h1-lh);
	letter-spacing: var(--type-h1-ls);
}

h2 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

h3 {
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	line-height: var(--type-h3-lh);
	letter-spacing: var(--type-h3-ls);
}

h4 {
	font-size: var(--type-small-size);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

p {
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	letter-spacing: var(--type-body-ls);
}

/* Mobile typography scale — prevents spec minimums from being too large on small screens */
@media (max-width: 640px) {
	h1 {
		font-size: clamp(2.5rem, 11vw, 4.5rem);
		line-height: var(--type-h1-lh);
		letter-spacing: var(--type-h1-ls);
	}
	h2 {
		font-size: clamp(1.875rem, 7vw, 2.75rem);
		line-height: var(--type-h2-lh);
		letter-spacing: var(--type-h2-ls);
	}
}

strong {
	color: #fff;
	font-weight: 600;
}

a {
	color: var(--ratiom-primary);
	text-decoration: none;
	transition: color var(--ratiom-transition);
}

a:hover {
	color: var(--ratiom-primary-hover);
}

/* Pill label / eyebrow */
.ratiom-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(196, 238, 24, 0.08);
	color: var(--ratiom-primary);
	border: 1px solid rgba(196, 238, 24, 0.18);
	border-radius: var(--ratiom-radius-full);
	padding: 0.45rem 0.8rem;
	font-size: var(--type-eyebrow-size);
	font-weight: var(--type-eyebrow-weight);
	text-transform: uppercase;
	letter-spacing: var(--type-eyebrow-ls);
	font-family: 'Inter', sans-serif;
	line-height: 1;
	margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------- */

.ratiom-btn-primary,
.ratiom-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--ratiom-radius-full);
	font-family: 'Inter', sans-serif;
	font-size: var(--type-btn-size);
	font-weight: var(--type-btn-weight);
	letter-spacing: var(--type-btn-ls);
	text-decoration: none;
	cursor: pointer;
	border: none;
	padding: 0.95rem 1.4rem;
	transition: background var(--ratiom-transition), box-shadow var(--ratiom-transition), color var(--ratiom-transition), border-color var(--ratiom-transition);
	white-space: nowrap;
}

.ratiom-btn-primary {
	background: var(--ratiom-primary);
	color: #000;
}

.ratiom-btn-primary:hover {
	background: var(--ratiom-primary-hover);
	color: #000;
	box-shadow: 0 6px 24px rgba(196, 238, 24, 0.35);
}

.ratiom-btn-secondary {
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.ratiom-btn-secondary:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------------------
   6. Cards
   --------------------------------------------------------------------------- */

.ratiom-card {
	background: var(--ratiom-card);
	border: 1px solid var(--ratiom-border);
	border-radius: var(--ratiom-radius);
	padding: 32px;
	height: 100%;
	transition: border-color var(--ratiom-transition), box-shadow var(--ratiom-transition);
}

.ratiom-card:hover {
	border-color: var(--ratiom-border-hover);
	box-shadow: 0 8px 40px rgba(196, 238, 24, 0.08);
}

/* Check / X list items */
.ratiom-check-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.ratiom-check-item + .ratiom-check-item {
	margin-top: 8px;
}

/* ── Global icon system ─────────────────────────────────────────────────── */
.ratiom-icon {
	width: var(--ratiom-icon-size);
	height: var(--ratiom-icon-size);
	color: #c4ee18;
	flex-shrink: 0;
	display: block;
}

.ratiom-check-icon {
	flex-shrink: 0;
	margin-top: 2px;
	display: block;
}

.ratiom-x-icon,
.ratiom-not-fit-x {
	flex-shrink: 0;
	margin-top: 2px;
	display: block;
	color: var(--ratiom-danger);
}

/* ---------------------------------------------------------------------------
   7. Header / Navigation
   --------------------------------------------------------------------------- */

/*
 * Alignment tokens — optical centering for logo, links, and CTA.
 * --logo-offset-y corrects for SVG intrinsic top/bottom whitespace
 * (content sits 0.75px above center at 32px height).
 * --nav-item-line-height: 1 prevents body line-height 1.65 from inflating
 * element heights and creating cross-browser vertical drift.
 */
:root {
	--site-header-height:   64px;
	--header-padding-y:     10px;   /* nav-wrapper vertical padding */
	--nav-padding-y:         4px;   /* .ratiom-nav inner vertical padding */
	--logo-offset-y:         1px;   /* SVG whitespace optical correction */
	--nav-item-line-height:    1;   /* lock link and CTA text height */
}

.ratiom-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Announcement Banner */
.ratiom-announcement-banner {
	background: var(--ratiom-primary);
	padding: 9px 16px;
	text-align: center;
	min-height: 40px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ratiom-announcement-text {
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.4;
	font-family: 'Inter', sans-serif;
}

.ratiom-announcement-text strong {
	color: #fff;
	font-weight: 700;
}

/* Navigation */
.ratiom-nav-wrapper {
	padding: var(--header-padding-y) 0;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ratiom-nav {
	max-width: var(--container-max-width);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: var(--nav-padding-y) var(--container-gutter);
	position: relative;
}

.ratiom-nav-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.ratiom-nav-logo img {
	height: 32px;
	width: auto;
	transform: translateY(var(--logo-offset-y));
	display: block;
}

.ratiom-nav-links {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 8px;
}

@media (min-width: 768px) {
	.ratiom-nav-links {
		display: flex;
	}
}

.ratiom-nav-link {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: var(--nav-item-line-height);
	padding: 8px 12px;
	border-radius: var(--ratiom-radius-full);
	transition: color var(--ratiom-transition), background var(--ratiom-transition);
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	display: flex;
	align-items: center;
}

.ratiom-nav-link:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.ratiom-nav-link.is-current,
.ratiom-nav-link[aria-current='page'] {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.ratiom-nav-cta {
	padding: 10px 22px;
	font-size: 0.875rem;
	line-height: var(--nav-item-line-height);
	flex-shrink: 0;
}

/* Mobile nav toggle */
.ratiom-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	padding: 7px;
	min-width: 44px;
	min-height: 44px;
	transition: background var(--ratiom-transition);
}

.ratiom-nav-toggle:hover {
	background: rgba(255, 255, 255, 0.14);
}

.ratiom-nav-logo:focus-visible,
.ratiom-nav-link:focus-visible,
.ratiom-nav-toggle:focus-visible,
.ratiom-nav-cta:focus-visible {
	outline: 2px solid var(--ratiom-primary);
	outline-offset: 3px;
}

@media (min-width: 768px) {
	.ratiom-nav-toggle {
		display: none;
	}
}

/* Mobile: hamburger left, logo centered, CTA right */
@media (max-width: 767px) {
	.ratiom-nav {
		justify-content: flex-start;
		gap: 8px;
	}
	.ratiom-nav-toggle {
		order: -1;
	}
	.ratiom-nav-logo {
		flex: 1;
		justify-content: center;
	}
	/* Ensure nav CTA meets 44px touch target */
	.ratiom-nav-cta {
		min-height: 44px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
}


/* Icon swap — X hidden by default, shown when toggle is expanded */
.ratiom-nav-toggle .ratiom-close-icon {
	display: none;
}

.ratiom-nav-toggle[aria-expanded="true"] .ratiom-burger-icon {
	display: none;
}

.ratiom-nav-toggle[aria-expanded="true"] .ratiom-close-icon {
	display: block;
}

/* ── Mobile full-screen overlay ─────────────────────────────────── */

/* Raise nav bar above the overlay within the header's stacking context */
@media (max-width: 767px) {
	.ratiom-nav-wrapper {
		position: relative;
		z-index: 60;
	}
}

.ratiom-mobile-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: #000;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.ratiom-mobile-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.28s ease, visibility 0s linear 0s;
}

@media (min-width: 768px) {
	.ratiom-mobile-overlay {
		display: none !important;
	}
}

.ratiom-mobile-overlay-nav {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: calc(var(--site-header-height) + 40px) var(--container-gutter) 48px;
	transform: translateY(20px);
	transition: transform 0.35s ease;
}

.ratiom-mobile-overlay.is-open .ratiom-mobile-overlay-nav {
	transform: translateY(0);
}

.ratiom-mobile-nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ratiom-mobile-nav-link {
	display: block;
	color: rgba(255, 255, 255, 0.6);
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: clamp(2.25rem, 9vw, 3.25rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.04em;
	text-decoration: none;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: color 0.2s ease;
}

.ratiom-mobile-nav-links li:last-child .ratiom-mobile-nav-link {
	border-bottom: none;
}

.ratiom-mobile-nav-link:hover,
.ratiom-mobile-nav-link.is-current {
	color: #fff;
}

.ratiom-mobile-cta {
	align-self: flex-start;
	margin-top: 40px;
	padding: 14px 28px;
	font-size: 1rem;
}

.ratiom-mobile-socials {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 40px;
}

.ratiom-mobile-social {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.35);
	transition: color 0.2s ease;
	text-decoration: none;
}

.ratiom-mobile-social:hover {
	color: rgba(255, 255, 255, 0.75);
}

.ratiom-mobile-social svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Scroll lock while overlay is open */
body.ratiom-menu-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.ratiom-mobile-overlay,
	.ratiom-mobile-overlay-nav {
		transition: none;
		transform: none;
	}
}

/* Shared action row helper used by non-hero patterns. */

.ratiom-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: var(--space-3);
	margin-bottom: 0;
}

/* Actual video embed — absolute fill so iframe/video fills the 16:9 container */

/* ---------------------------------------------------------------------------
   9. Media Carousel
   --------------------------------------------------------------------------- */

.ratiom-carousel-section {
	padding-block: 40px;
	overflow: hidden;
}

/* Scrollable track — matches Vite source layout */
.ratiom-media-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	padding: 8px 24px;
	user-select: none;
}

@media (min-width: 1024px) {
	.ratiom-media-track {
		gap: 20px;
		padding: 8px 48px;
	}
}

.ratiom-media-track:active {
	cursor: grabbing;
}

.ratiom-media-track::-webkit-scrollbar {
	display: none;
}

/* Individual media cards */
.ratiom-media-card {
	flex-shrink: 0;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: border-color 0.5s ease;
	/* Subtle diagonal gradient + grid pattern */
	background-color: #050505;
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
		repeating-linear-gradient(rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 24px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 24px);
}

/* Subtle radial glow using the hue custom property */
.ratiom-media-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 30% 40%,
		rgba(196, 238, 24, 0.03) 0%,
		transparent 70%
	);
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.ratiom-media-card:hover {
	border-color: rgba(255, 255, 255, 0.2);
}

.ratiom-media-card:hover::before {
	opacity: 2;
}

/* Portrait cards: 9:16 aspect ratio */
.ratiom-media-card--portrait {
	width: 176px;
	aspect-ratio: 9 / 16;
}

/* Square cards: 1:1 aspect ratio */
.ratiom-media-card--square {
	width: 224px;
	aspect-ratio: 1 / 1;
}

/* Aspect ratio badge in top-right corner */
.ratiom-media-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--ratiom-radius-full);
	padding: 2px 8px;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.25);
	z-index: 10;
	font-family: 'Inter', sans-serif;
}

/* Centered content: icon + label */
.ratiom-media-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	z-index: 10;
}

/* Icon circle */
.ratiom-media-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.4);
	transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

.ratiom-media-card:hover .ratiom-media-icon {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(196, 238, 24, 0.3);
	color: rgba(196, 238, 24, 0.7);
}

/* Label text */
.ratiom-media-label {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	margin: 0;
	transition: color 0.4s ease;
	font-family: 'Inter', sans-serif;
}

.ratiom-media-card:hover .ratiom-media-label {
	color: rgba(255, 255, 255, 0.5);
}

/* Sub-label (e.g., "9:16 Video") */
.ratiom-media-meta {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.15);
	margin: 0;
	transition: color 0.4s ease;
	font-family: 'Inter', sans-serif;
}

.ratiom-media-card:hover .ratiom-media-meta {
	color: rgba(255, 255, 255, 0.3);
}

/* ---------------------------------------------------------------------------
   11. Problem Section
   --------------------------------------------------------------------------- */

.ratiom-problem-icon-wrap {
	width: 44px;
	height: 44px;
	background: var(--ratiom-primary-dim);
	border: 1px solid rgba(196, 238, 24, 0.15);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-2);
	color: var(--ratiom-primary);
}

.ratiom-problem-card h3 {
	margin: 0 0 12px;
}

.ratiom-problem-card p {
	margin: 0;
	font-size: 0.9375rem;
}

.ratiom-problem-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ratiom-problem-card p + p {
	margin-top: var(--space-2);
}

.ratiom-inaction-box {
	margin-top: var(--space-4);
	background: rgba(248, 113, 113, 0.05);
	border: 1px solid rgba(248, 113, 113, 0.2);
	border-radius: var(--ratiom-radius);
	padding: var(--space-3) var(--space-4);
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.ratiom-inaction-icon {
	color: #f87171;
	flex-shrink: 0;
	margin-top: 2px;
}

.ratiom-inaction-text {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.7;
}

.ratiom-inaction-text strong {
	color: #f87171;
}

/* ---------------------------------------------------------------------------
   15. Deliverables Section
   --------------------------------------------------------------------------- */

.ratiom-deliverable-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--space-2);
}

.ratiom-deliverable-icon {
	width: 40px;
	height: 40px;
	background: var(--ratiom-primary-dim);
	border: 1px solid var(--ratiom-primary-border);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ratiom-primary);
	flex-shrink: 0;
}

.ratiom-deliverable-header h3 {
	margin: 0;
}

.ratiom-deliverable-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   16. About Founder Section
   --------------------------------------------------------------------------- */

.ratiom-founder-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	align-items: center;
}

@media (min-width: 1024px) {
	.ratiom-founder-inner {
		grid-template-columns: 240px 1fr;
		gap: 40px;
		align-items: center;
	}
}

.ratiom-founder-avatar-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

@media (min-width: 1024px) {
	.ratiom-founder-avatar-col {
		align-items: center;
	}
}

.ratiom-founder-identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.ratiom-founder-identity .ratiom-founder-name,
.ratiom-founder-identity .ratiom-founder-role {
	margin: 0;
}

.ratiom-founder-avatar {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1a2600 0%, #0a1200 100%);
	border: 2px solid var(--ratiom-primary-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 0 0 4px rgba(196, 238, 24, 0.06);
}

.ratiom-founder-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.ratiom-founder-initials {
	font-family: 'Darker Grotesque', sans-serif;
	font-size: var(--type-h2-size);
	font-weight: 900;
	color: var(--ratiom-primary);
}

.ratiom-founder-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ratiom-primary-dim);
	color: var(--ratiom-primary);
	border: 1px solid var(--ratiom-primary-border);
	border-radius: var(--ratiom-radius-full);
	padding: 5px 12px;
	font-size: 0.75rem;
	font-weight: 600;
}

.ratiom-founder-socials {
	display: flex;
	gap: 10px;
}

.ratiom-social-link {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	transition: color var(--ratiom-transition), background var(--ratiom-transition), border-color var(--ratiom-transition);
}

@media (max-width: 767px) {
	.ratiom-social-link {
		width: 44px;
		height: 44px;
	}
}

.ratiom-social-link:hover {
	color: var(--ratiom-primary);
	background: var(--ratiom-primary-dim);
	border-color: var(--ratiom-primary-border);
}

.ratiom-founder-bio h2 {
	margin-block: var(--space-2) var(--space-3);
}

.ratiom-founder-headline-group {
	max-width: 720px;
	margin-bottom: var(--space-3);
}

.ratiom-founder-headline-group .ratiom-label {
	margin-bottom: 12px;
}

.ratiom-founder-bio .ratiom-founder-headline-group h2 {
	margin: 0 0 12px;
}

.ratiom-founder-bio .ratiom-founder-support {
	margin: 0;
	max-width: none;
	font-size: 1.2rem;
	line-height: 1.5;
	letter-spacing: -0.01em;
}

.ratiom-founder-bio p {
	margin: 0 0 var(--space-3);
	max-width: 700px;
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

.ratiom-founder-bio .ratiom-btn-primary {
	margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   17. Fit Section
   --------------------------------------------------------------------------- */

.ratiom-fit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}

@media (min-width: 768px) {
	.ratiom-fit-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ratiom-fit-card-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: var(--space-2);
}

.ratiom-fit-card-header h3 {
	margin: 0;
}

.ratiom-fit-icon {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ratiom-fit-icon--yes {
	background: rgba(196, 238, 24, 0.1);
	border: 1px solid rgba(196, 238, 24, 0.25);
	color: var(--ratiom-primary);
}

.ratiom-fit-icon--no {
	background: rgba(248, 113, 113, 0.1);
	border: 1px solid rgba(248, 113, 113, 0.25);
	color: var(--ratiom-danger);
}

.ratiom-fit-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ratiom-comparison-card .ratiom-fit-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ratiom-comparison-card .ratiom-fit-list li {
	position: relative;
	padding-left: 18px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.ratiom-comparison-card .ratiom-fit-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
}

.ratiom-comparison-card--ratiom {
	border-color: var(--ratiom-primary-border);
}

.ratiom-comparison-card--ratiom .ratiom-fit-list li::before {
	background: var(--ratiom-primary);
}

/* ---------------------------------------------------------------------------
   18. Pricing Section
   --------------------------------------------------------------------------- */

.ratiom-pricing-grid {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.ratiom-pricing-card {
	max-width: 500px;
	width: 100%;
}

.ratiom-pricing-card {
	background: var(--ratiom-card);
	border: 1px solid var(--ratiom-border);
	border-radius: var(--ratiom-radius-lg);
	padding: var(--space-3);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: border-color var(--ratiom-transition);
}

.ratiom-pricing-featured {
	border-color: var(--ratiom-primary);
	background: #0a1400;
	box-shadow: 0 0 60px rgba(196, 238, 24, 0.08);
}

.ratiom-pricing-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ratiom-primary);
	color: #000;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 4px 14px;
	border-radius: var(--ratiom-radius-full);
	white-space: nowrap;
}

.ratiom-pricing-tier-label {
	font-family: 'Inter', sans-serif;
	font-size: var(--type-body-size);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 10px;
	text-align: center;
}

.ratiom-pricing-price-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	margin-bottom: 10px;
}

.ratiom-pricing-price {
	font-family: 'Darker Grotesque', sans-serif;
	font-size: var(--type-h2-size);
	font-weight: 900;
	color: #fff;
	letter-spacing: var(--type-h2-ls);
	line-height: var(--type-h2-lh);
}

.ratiom-pricing-period {
	font-size: var(--type-small-size);
	color: rgba(255, 255, 255, 0.4);
}

.ratiom-pricing-desc {
	font-size: var(--type-small-size);
	color: rgba(255, 255, 255, 0.5);
	line-height: var(--type-small-lh);
	margin: 0 0 16px;
	text-align: center;
}

.ratiom-pricing-features {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	flex: 1;
}

.ratiom-pricing-features .ratiom-check-item {
	justify-content: center;
}

.ratiom-pricing-cta {
	width: 100%;
	justify-content: center;
}

.ratiom-pricing-footnote {
	text-align: center;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 24px;
}

.ratiom-pricing-footnote a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: underline;
}

.ratiom-pricing-footnote a:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------
   19. FAQ Section
   --------------------------------------------------------------------------- */

.ratiom-faq-list {
	max-width: 780px;
	margin-inline: auto;
}

.ratiom-faq-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ratiom-faq-item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.ratiom-faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 16px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.ratiom-faq-question::-webkit-details-marker {
	display: none;
}

.ratiom-faq-question span {
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	color: rgba(255, 255, 255, 0.9);
	line-height: var(--type-h3-lh);
	letter-spacing: var(--type-h3-ls);
}

.ratiom-faq-chevron {
	color: var(--ratiom-primary);
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.ratiom-faq-item[open] .ratiom-faq-chevron {
	transform: rotate(180deg);
}

.ratiom-faq-answer {
	padding-bottom: var(--space-2);
}

.ratiom-faq-answer p {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.6);
	line-height: var(--type-body-lh);
	margin: 0;
}

.ratiom-faq-answer p + p {
	margin-top: 1rem;
}

/* ---------------------------------------------------------------------------
   20. Final CTA Section
   --------------------------------------------------------------------------- */

.ratiom-final-cta {
	background: linear-gradient(135deg, #050900 0%, #000 50%, #050900 100%);
	border-top: 1px solid rgba(196, 238, 24, 0.1);
	padding-block: 100px;
}

.ratiom-cta-inner {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.ratiom-cta-content h2 {
	margin-block: var(--space-2) var(--space-3);
}

.ratiom-cta-sub {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.6);
	line-height: var(--type-body-lh);
	margin-bottom: var(--space-3);
}

.ratiom-cta-benefits {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: left;
	margin-bottom: var(--space-4);
}

.ratiom-cta-benefit {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
}

.ratiom-cta-benefit > div {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.65);
	line-height: var(--type-body-lh);
}

.ratiom-cta-benefit strong {
	color: #fff;
}

.ratiom-cta-btn {
	padding: 0.95rem 1.4rem;
}

.ratiom-cta-actions {
	justify-content: center;
	margin-top: 32px;
	margin-bottom: 0;
}

.ratiom-section-actions {
	justify-content: center;
	margin-top: 40px;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   22. Generic Page Content (page.html template)
   --------------------------------------------------------------------------- */

.ratiom-page-content {
	padding-block: 80px;
}

.ratiom-page-title {
	margin-bottom: 48px;
}

.ratiom-page-content .wp-block-post-content {
	color: rgba(255, 255, 255, 0.7);
}

.ratiom-page-content .wp-block-post-content h2,
.ratiom-page-content .wp-block-post-content h3 {
	margin-top: 48px;
	margin-bottom: 16px;
}

.ratiom-page-content .wp-block-post-content p {
	margin-bottom: 18px;
	line-height: 1.8;
}

.ratiom-page-content .wp-block-post-content a {
	color: var(--ratiom-primary);
}

/* ---------------------------------------------------------------------------
   23. Utility — Scroll margin for anchor targets
   --------------------------------------------------------------------------- */

#hero,
#offer,
#why-ratiom,
#how-it-works,
#about,
#pricing,
#faq,
#book-call {
	scroll-margin-top: 110px;
}

/* ---------------------------------------------------------------------------
   24. Reduced Motion
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   25. Blog Index
   --------------------------------------------------------------------------- */

.ratiom-blog-hero {
	padding-block: 80px 64px;
	text-align: center;
}

@media (min-width: 1024px) {
	.ratiom-blog-hero {
		padding-block: 120px 80px;
	}
}

.ratiom-blog-hero h1 {
	margin-block: 20px 20px;
}

.ratiom-blog-hero-sub {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.6);
	line-height: var(--type-body-lh);
	max-width: 65ch;
	margin-inline: auto;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   26. Post Cards
   --------------------------------------------------------------------------- */

.ratiom-posts-section {
	padding-block: 0 80px;
}

@media (min-width: 1024px) {
	.ratiom-posts-section {
		padding-block: 0 120px;
	}
}

/* The wp:post-template block renders a ul — override to grid */
.wp-block-post-template.ratiom-posts-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

@media (min-width: 640px) {
	.wp-block-post-template.ratiom-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.wp-block-post-template.ratiom-posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wp-block-post-template.ratiom-posts-grid > li {
	display: contents;
}

.ratiom-post-card {
	background: var(--ratiom-card);
	border: 1px solid var(--ratiom-border);
	border-radius: var(--ratiom-radius);
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	transition: border-color var(--ratiom-transition), box-shadow var(--ratiom-transition);
	text-decoration: none;
}

.ratiom-post-card:hover {
	border-color: var(--ratiom-border-hover);
	box-shadow: 0 8px 40px rgba(196, 238, 24, 0.08);
}

/* Featured image inside post card */
.ratiom-post-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #0a0a0a;
	flex-shrink: 0;
	margin: 0;
}

.ratiom-post-card .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

.ratiom-post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.ratiom-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.ratiom-post-card-body {
	padding: 24px;
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.ratiom-post-card-meta {
	display: flex !important;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Post terms (category) in card */
.ratiom-post-card-meta .wp-block-post-terms,
.ratiom-post-card-meta .ratiom-post-card-category {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ratiom-primary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.ratiom-post-card-meta .wp-block-post-terms a {
	color: var(--ratiom-primary);
	text-decoration: none;
}

.ratiom-post-card-meta .wp-block-post-terms a:hover {
	color: var(--ratiom-primary-hover);
}

/* Post date in card */
.ratiom-post-card-meta .wp-block-post-date,
.ratiom-post-card-meta .ratiom-post-card-date {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.35);
}

.ratiom-post-card-meta .wp-block-post-date time {
	color: rgba(255, 255, 255, 0.35);
}

/* Post title in card */
.ratiom-post-card-body .wp-block-post-title,
.ratiom-post-card-body .ratiom-post-card-title {
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 900;
	color: #fff;
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin: 0;
}

.ratiom-post-card-body .wp-block-post-title a {
	color: #fff;
	text-decoration: none;
	transition: color var(--ratiom-transition);
}

.ratiom-post-card-body .wp-block-post-title a:hover {
	color: var(--ratiom-primary);
}

/* Post excerpt in card */
.ratiom-post-card-body .wp-block-post-excerpt,
.ratiom-post-card-body .ratiom-post-card-excerpt {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.7;
	margin: 0;
}

.ratiom-post-card-body .wp-block-post-excerpt p {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.7;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ratiom-post-card-body .wp-block-post-excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.ratiom-post-card-footer {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Author name in card footer */
.ratiom-post-card-footer .wp-block-post-author-name,
.ratiom-post-card-footer .ratiom-post-card-author {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.4);
}

/* Read more in card footer */
.ratiom-post-card-footer .wp-block-read-more,
.ratiom-post-card-footer .ratiom-post-card-read-more {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ratiom-primary);
	text-decoration: none;
	transition: color var(--ratiom-transition);
}

.ratiom-post-card-footer .wp-block-read-more:hover,
.ratiom-post-card-footer .ratiom-post-card-read-more:hover {
	color: var(--ratiom-primary-hover);
}

/* Hides the post title appended by wp:read-more for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* ---------------------------------------------------------------------------
   27. Single Post Layout
   --------------------------------------------------------------------------- */

.ratiom-post-wrap {
	padding-block: 64px 80px;
}

@media (min-width: 1024px) {
	.ratiom-post-wrap {
		padding-block: 80px 120px;
	}
}

.ratiom-post-header {
	max-width: 740px;
	margin-inline: auto;
	margin-bottom: 40px;
	padding-inline: 24px;
}

@media (min-width: 1024px) {
	.ratiom-post-header {
		padding-inline: 32px;
	}
}

.ratiom-post-meta {
	display: flex !important;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

/* Category pill on single post */
.ratiom-post-meta .wp-block-post-terms a,
.ratiom-post-meta-cat {
	display: inline-flex;
	align-items: center;
	background: var(--ratiom-primary-dim);
	color: var(--ratiom-primary);
	border: 1px solid var(--ratiom-primary-border);
	border-radius: var(--ratiom-radius-full);
	padding: 4px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.ratiom-post-meta .wp-block-post-terms a:hover {
	background: rgba(196, 238, 24, 0.15);
}

.ratiom-post-meta-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
	display: inline-block;
}

.ratiom-post-meta .wp-block-post-date time,
.ratiom-post-meta-date {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.4);
}

.ratiom-post-meta .wp-block-post-author-name,
.ratiom-post-meta-author {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.4);
}

.ratiom-post-header .wp-block-post-title {
	font-size: var(--type-h2-size);
	letter-spacing: var(--type-h2-ls);
	line-height: var(--type-h2-lh);
	color: #fff;
	margin: 0;
}

/* Featured image on single post */
.ratiom-post-featured-image-wrap {
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: 56px;
	padding-inline: 24px;
}

@media (min-width: 1024px) {
	.ratiom-post-featured-image-wrap {
		padding-inline: 32px;
	}
}

.ratiom-post-featured-image-wrap .wp-block-post-featured-image img,
.ratiom-post-featured-image-wrap img {
	width: 100%;
	height: auto;
	border-radius: var(--ratiom-radius-lg);
	border: 1px solid var(--ratiom-border);
}

/* ---------------------------------------------------------------------------
   28. Post Body Typography
   --------------------------------------------------------------------------- */

.ratiom-post-body {
	max-width: 740px;
	margin-inline: auto;
	padding-inline: 24px;
}

@media (min-width: 1024px) {
	.ratiom-post-body {
		padding-inline: 32px;
	}
}

.ratiom-post-body p {
	font-size: var(--type-body-size);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 24px;
}

.ratiom-post-body h2 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
	margin-top: 56px;
	margin-bottom: 20px;
}

.ratiom-post-body h3 {
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	line-height: var(--type-h3-lh);
	letter-spacing: var(--type-h3-ls);
	margin-top: 40px;
	margin-bottom: 16px;
}

.ratiom-post-body h4 {
	font-size: var(--type-body-size);
	margin-top: 32px;
	margin-bottom: 12px;
}

.ratiom-post-body h5,
.ratiom-post-body h6 {
	font-size: 1rem;
	margin-top: 28px;
	margin-bottom: 10px;
}

.ratiom-post-body ul,
.ratiom-post-body ol {
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.0625rem;
	line-height: 1.8;
	padding-left: 24px;
	margin-bottom: 24px;
}

.ratiom-post-body li {
	margin-bottom: 8px;
}

.ratiom-post-body li::marker {
	color: var(--ratiom-primary);
}

.ratiom-post-body a {
	color: var(--ratiom-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(196, 238, 24, 0.4);
}

.ratiom-post-body a:hover {
	color: var(--ratiom-primary-hover);
	text-decoration-color: var(--ratiom-primary-hover);
}

.ratiom-post-body strong {
	color: #fff;
	font-weight: 600;
}

.ratiom-post-body blockquote {
	border-left: 3px solid var(--ratiom-primary);
	margin-inline: 0;
	padding: 16px 24px;
	background: rgba(196, 238, 24, 0.04);
	border-radius: 0 var(--ratiom-radius-sm) var(--ratiom-radius-sm) 0;
	margin-block: 32px;
}

.ratiom-post-body blockquote p {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.8);
	font-style: italic;
	margin: 0;
}

.ratiom-post-body blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: var(--type-small-size);
	color: rgba(255, 255, 255, 0.4);
	font-style: normal;
}

.ratiom-post-body figure {
	margin-inline: 0;
	margin-block: 40px;
}

.ratiom-post-body figure img {
	border-radius: var(--ratiom-radius);
	border: 1px solid var(--ratiom-border);
}

.ratiom-post-body figcaption {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.4);
	text-align: center;
	margin-top: 12px;
	line-height: 1.5;
}

.ratiom-post-body code {
	font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
	font-size: 0.875rem;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	padding: 2px 6px;
	color: rgba(255, 255, 255, 0.85);
}

.ratiom-post-body pre {
	background: #0a0a0a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--ratiom-radius-sm);
	padding: 24px;
	overflow-x: auto;
	margin-block: 32px;
}

.ratiom-post-body pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

.ratiom-post-body hr {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin-block: 48px;
}

.ratiom-post-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin-block: 32px;
	overflow-x: auto;
	display: block;
}

.ratiom-post-body th {
	text-align: left;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: var(--type-small-size);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.5);
}

.ratiom-post-body td {
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   29. Post Tags
   --------------------------------------------------------------------------- */

.ratiom-post-tags-wrap {
	max-width: 740px;
	margin-inline: auto;
	padding-inline: 24px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

@media (min-width: 1024px) {
	.ratiom-post-tags-wrap {
		padding-inline: 32px;
	}
}

.ratiom-post-tags-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.35);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ratiom-post-tags-wrap .wp-block-post-terms a,
.ratiom-post-tag {
	display: inline-block;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--ratiom-radius-full);
	padding: 4px 12px;
	text-decoration: none;
	transition: color var(--ratiom-transition), border-color var(--ratiom-transition), background var(--ratiom-transition);
}

.ratiom-post-tags-wrap .wp-block-post-terms a:hover,
.ratiom-post-tag:hover {
	color: var(--ratiom-primary);
	border-color: var(--ratiom-primary-border);
	background: var(--ratiom-primary-dim);
}

/* ---------------------------------------------------------------------------
   30. Post Navigation (Prev / Next)
   --------------------------------------------------------------------------- */

.ratiom-post-nav-wrap {
	max-width: 900px;
	margin-inline: auto;
	margin-top: 64px;
	padding-inline: 24px;
}

@media (min-width: 1024px) {
	.ratiom-post-nav-wrap {
		padding-inline: 32px;
	}
}

.ratiom-post-nav-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (min-width: 640px) {
	.ratiom-post-nav-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------------------------------------------------------------------------
   31b. Centered Section Header Modifier
   --------------------------------------------------------------------------- */

.ratiom-section-header--center {
	text-align: center;
	margin-inline: auto;
	max-width: 700px;
}

.ratiom-section-header--center h2 {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
   31c. Problem Stats Row (4 key value props)
   --------------------------------------------------------------------------- */

.ratiom-problem-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--ratiom-radius-sm);
	overflow: hidden;
}

@media (min-width: 640px) {
	.ratiom-problem-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ratiom-problem-stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ratiom-problem-stat {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

@media (min-width: 1024px) {
	.ratiom-problem-stat {
		border-bottom: none;
		border-right: 1px solid rgba(255, 255, 255, 0.07);
	}

	.ratiom-problem-stat:last-child {
		border-right: none;
	}
}

@media (min-width: 640px) and (max-width: 1023px) {
	.ratiom-problem-stat:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.07);
	}

	.ratiom-problem-stat:nth-last-child(-n+2) {
		border-bottom: none;
	}
}

@media (max-width: 639px) {
	.ratiom-problem-stat:last-child {
		border-bottom: none;
	}
}

.ratiom-problem-stat .ratiom-principle-dot {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	margin-top: 0;
}

.ratiom-problem-stat h4 {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: normal;
	line-height: 1.4;
}

.ratiom-problem {
	padding-block: 40px;
}

/* ---------------------------------------------------------------------------
   32. New Offer — Services Grid
   --------------------------------------------------------------------------- */

.ratiom-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--ratiom-primary);
	border: 1px solid var(--ratiom-primary);
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.ratiom-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ratiom-services-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ratiom-service-box {
	padding: 32px;
	background: #000;
	transition: background var(--ratiom-transition);
}

.ratiom-service-name {
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	letter-spacing: normal;
	line-height: 1.3;
}

.ratiom-service-desc {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.58);
	line-height: var(--type-body-lh);
	margin: 0;
}

.ratiom-services .ratiom-section-actions {
	margin-top: 40px;
}

/* ---------------------------------------------------------------------------
   33. New Offer — Founder CTA & Mobile Sticky CTA
   --------------------------------------------------------------------------- */

/* Scroll margin for new anchor targets */
#services,
#problem {
	scroll-margin-top: 110px;
}

/* Style wp:post-navigation-link blocks */
.ratiom-post-nav-inner .wp-block-post-navigation-link {
	background: var(--ratiom-card);
	border: 1px solid var(--ratiom-border);
	border-radius: var(--ratiom-radius);
	padding: 0;
	transition: border-color var(--ratiom-transition), box-shadow var(--ratiom-transition);
}

.ratiom-post-nav-inner .wp-block-post-navigation-link:hover {
	border-color: var(--ratiom-border-hover);
	box-shadow: 0 8px 40px rgba(196, 238, 24, 0.08);
}

.ratiom-post-nav-inner .wp-block-post-navigation-link a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	text-decoration: none;
}

.ratiom-post-nav-inner .wp-block-post-navigation-link--previous a {
	align-items: flex-start;
}

.ratiom-post-nav-inner .wp-block-post-navigation-link--next a {
	align-items: flex-end;
	text-align: right;
}

.ratiom-post-nav-inner .wp-block-post-navigation-link__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ratiom-primary);
}

.ratiom-post-nav-inner .wp-block-post-navigation-link__title {
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.4;
	transition: color var(--ratiom-transition);
	margin: 0;
}

.ratiom-post-nav-inner .wp-block-post-navigation-link:hover .wp-block-post-navigation-link__title {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   31. Blog CTA (inline post CTA)
   --------------------------------------------------------------------------- */

.ratiom-blog-cta {
	max-width: 740px;
	margin-inline: auto;
	padding-inline: 24px;
	margin-top: 56px;
}

@media (min-width: 1024px) {
	.ratiom-blog-cta {
		padding-inline: 32px;
	}
}

.ratiom-blog-cta-inner {
	background: linear-gradient(135deg, rgba(196, 238, 24, 0.06) 0%, rgba(0, 0, 0, 0) 100%);
	border: 1px solid var(--ratiom-primary-border);
	border-radius: var(--ratiom-radius-lg);
	padding: 36px 32px;
	text-align: center;
}

.ratiom-blog-cta-inner .ratiom-label {
	margin-bottom: 20px;
	display: inline-flex;
}

.ratiom-blog-cta-inner h3 {
	margin-block: 16px 12px;
}

.ratiom-blog-cta-inner p {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.6);
	line-height: var(--type-body-lh);
	margin-bottom: 28px;
	max-width: 480px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   32. Archive & Search Headers
   --------------------------------------------------------------------------- */

.ratiom-archive-hero {
	padding-block: 72px 56px;
	text-align: center;
}

@media (min-width: 1024px) {
	.ratiom-archive-hero {
		padding-block: 100px 72px;
	}
}

.ratiom-archive-hero-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ratiom-primary);
	margin-bottom: 14px;
	display: block;
}

.ratiom-archive-hero .wp-block-query-title,
.ratiom-archive-hero h1 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
	margin-block: 0 16px;
}

.ratiom-archive-hero .wp-block-term-description,
.ratiom-archive-hero-desc {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.55);
	line-height: var(--type-body-lh);
	max-width: 65ch;
	margin-inline: auto;
	margin-bottom: 0;
}

.ratiom-archive-hero .wp-block-term-description p {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.55);
	line-height: var(--type-body-lh);
	margin: 0;
}

/* Search header */
.ratiom-search-hero {
	padding-block: 72px 56px;
	text-align: center;
}

@media (min-width: 1024px) {
	.ratiom-search-hero {
		padding-block: 100px 72px;
	}
}

.ratiom-search-hero h1,
.ratiom-search-hero .wp-block-query-title {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
	margin-block: 0 16px;
}

.ratiom-search-hero-sub {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

.ratiom-search-hero-query {
	color: var(--ratiom-primary);
}

/* No results */
.ratiom-no-results {
	text-align: center;
	padding-block: 80px;
	max-width: 500px;
	margin-inline: auto;
}

.ratiom-no-results-icon {
	width: 64px;
	height: 64px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	margin-bottom: 24px;
	color: rgba(255, 255, 255, 0.3);
}

.ratiom-no-results h2 {
	font-size: 1.375rem;
	margin-bottom: 12px;
}

.ratiom-no-results p {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.7;
	margin-bottom: 32px;
}

/* ---------------------------------------------------------------------------
   33. Blog Pagination
   --------------------------------------------------------------------------- */

/* WordPress native Query Pagination styling */
.wp-block-query-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding-top: 56px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding-inline: 0;
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	font-size: 0.875rem;
	font-weight: 500;
	font-family: 'Inter', sans-serif;
	border-radius: var(--ratiom-radius-full);
	text-decoration: none;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: background var(--ratiom-transition), color var(--ratiom-transition), border-color var(--ratiom-transition);
}

.wp-block-query-pagination-numbers a:hover,
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
}

.wp-block-query-pagination-numbers .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	font-size: 0.875rem;
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	border-radius: var(--ratiom-radius-full);
	color: #000;
	background: var(--ratiom-primary);
	border: 1px solid var(--ratiom-primary);
}

/* ---------------------------------------------------------------------------
   34. Page Content (legal pages, simple pages)
   --------------------------------------------------------------------------- */

/* Already handled in section 22 — extended styles for deeper content */
.ratiom-page-content .wp-block-post-content h4,
.ratiom-page-content .wp-block-post-content h5,
.ratiom-page-content .wp-block-post-content h6 {
	margin-top: 32px;
	margin-bottom: 12px;
}

.ratiom-page-content .wp-block-post-content ul,
.ratiom-page-content .wp-block-post-content ol {
	color: rgba(255, 255, 255, 0.65);
	font-size: 1rem;
	line-height: 1.8;
	padding-left: 24px;
	margin-bottom: 20px;
}

.ratiom-page-content .wp-block-post-content li {
	margin-bottom: 8px;
}

.ratiom-page-content .wp-block-post-content li::marker {
	color: var(--ratiom-primary);
}

.ratiom-page-content .wp-block-post-content blockquote {
	border-left: 3px solid var(--ratiom-primary);
	padding: 14px 24px;
	background: rgba(196, 238, 24, 0.04);
	border-radius: 0 var(--ratiom-radius-sm) var(--ratiom-radius-sm) 0;
	margin-inline: 0;
	margin-block: 28px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Compact How It Works — 4-column horizontal process row
   --------------------------------------------------------------------------- */

.ratiom-hiw-compact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}

@media (min-width: 640px) {
	.ratiom-hiw-compact {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ratiom-hiw-compact {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ratiom-hiw-compact-step {
	background: var(--ratiom-card);
	border: 1px solid var(--ratiom-border);
	border-radius: var(--ratiom-radius);
	padding: 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: border-color var(--ratiom-transition);
}

.ratiom-hiw-compact-step:hover {
	border-color: var(--ratiom-border-hover);
}

.ratiom-hiw-compact-icon {
	width: 40px;
	height: 40px;
	background: var(--ratiom-primary-dim);
	border: 1px solid var(--ratiom-primary-border);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ratiom-primary);
	margin-bottom: 4px;
	flex-shrink: 0;
}

.ratiom-hiw-compact-num {
	font-family: 'Inter', sans-serif;
	font-size: var(--type-eyebrow-size);
	font-weight: 700;
	color: var(--ratiom-primary);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ratiom-hiw-compact-step h4 {
	margin: 0;
	font-size: 1rem;
	font-weight: 900;
	line-height: 1.3;
}

.ratiom-hiw-compact-step p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Merged Problem + What I Do section
   --------------------------------------------------------------------------- */

.ratiom-what-i-do {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ratiom-what-i-do-heading {
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
	margin-bottom: 20px;
}

.ratiom-what-i-do-heading .ratiom-label {
	margin-bottom: 12px;
}

.ratiom-what-i-do-heading h3 {
	margin: 12px 0 0;
}

.ratiom-what-i-do-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

@media (min-width: 640px) {
	.ratiom-what-i-do-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ratiom-what-i-do-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ratiom-what-i-do-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	background: var(--ratiom-card);
	border: 1px solid var(--ratiom-border);
	border-radius: var(--ratiom-radius);
	transition: border-color var(--ratiom-transition);
}

.ratiom-what-i-do-item:hover {
	border-color: var(--ratiom-border-hover);
}

.ratiom-what-i-do-icon {
	width: 40px;
	height: 40px;
	background: var(--ratiom-primary-dim);
	border: 1px solid var(--ratiom-primary-border);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ratiom-primary);
	margin-bottom: 4px;
	flex-shrink: 0;
}

.ratiom-what-i-do-item strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
}

.ratiom-what-i-do-item p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Merged Operating Model section — additional styles
   --------------------------------------------------------------------------- */

.ratiom-why-wont-get {
	margin-top: 24px;
	font-size: 0.9375rem;
	line-height: 2;
	color: rgba(255, 255, 255, 0.55);
}

.ratiom-why-wont-get strong {
	display: block;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.8);
}

.ratiom-wont-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------------------------------------------------------------------------
   35. Pricing Card — Redesigned (single card, centered, lime border)
   --------------------------------------------------------------------------- */

.ratiom-pricing-card--new {
	max-width: 400px;
	background: transparent;
	border: 2px solid var(--ratiom-primary);
	border-radius: 4px;
	padding: 40px;
	box-shadow: none;
}

.ratiom-pricing-price--xl {
	font-size: var(--type-h1-size);
	font-weight: var(--type-h1-weight);
	letter-spacing: var(--type-h1-ls);
	line-height: var(--type-h1-lh);
	color: #fff;
}

.ratiom-pricing-included-label {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	margin: 24px 0 16px;
}

.ratiom-pricing-card--new .ratiom-pricing-price-row {
	justify-content: flex-start;
	margin-bottom: 0;
}

.ratiom-pricing-card--new .ratiom-pricing-features {
	margin-bottom: 0;
	text-align: left;
}

.ratiom-pricing-card--new .ratiom-pricing-features .ratiom-check-item {
	justify-content: flex-start;
	font-size: 0.875rem;
}

.ratiom-pricing-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ratiom-pricing-ads-callout {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ratiom-primary);
	margin: 0 0 12px;
}

.ratiom-pricing-card--new .ratiom-pricing-cta {
	margin-top: 32px;
	width: 100%;
	justify-content: center;
}

@media (max-width: 767px) {
	.ratiom-pricing-card--new {
		padding: 28px 24px;
	}
}

/* ---------------------------------------------------------------------------
   36. Pricing — 3-Column Grid Layout
   --------------------------------------------------------------------------- */

.ratiom-pricing-intro {
	font-size: var(--type-body-size);
	color: rgba(255, 255, 255, 0.55);
	line-height: var(--type-body-lh);
	max-width: 580px;
	margin: 8px auto 0;
}

.ratiom-pricing-grid--3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
	align-items: stretch;
}

.ratiom-pricing-grid--3col .ratiom-pricing-card--new {
	max-width: none;
	border-width: 1px;
	display: flex;
	flex-direction: column;
}

.ratiom-pricing-grid--2col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 40px;
	align-items: stretch;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.ratiom-pricing-grid--2col .ratiom-pricing-card--new {
	max-width: none;
	border-width: 1px;
	display: flex;
	flex-direction: column;
}

.ratiom-pricing-card--featured {
	border-width: 2px !important;
	background: rgba(212, 253, 40, 0.03);
}

.ratiom-pricing-tier-badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #000;
	background: var(--ratiom-primary);
	padding: 4px 10px;
	border-radius: 2px;
	margin-bottom: 16px;
	align-self: flex-start;
}

.ratiom-pricing-tier-name {
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	color: #fff;
	margin: 0 0 16px;
}

.ratiom-pricing-period-sub {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.5);
	margin: 4px 0 16px;
}

.ratiom-pricing-delivery {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ratiom-primary);
	margin: 0 0 16px;
}

.ratiom-pricing-card-desc {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.6;
	margin: 0 0 16px;
}

.ratiom-pricing-note {
	font-size: 0.75rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 12px;
}

.ratiom-pricing-ads-note {
	font-size: 0.75rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.5;
	margin-top: 12px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 4px;
}

.ratiom-pricing-footer-note {
	text-align: center;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 32px;
}

@media (max-width: 1024px) {
	.ratiom-pricing-grid--3col {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.ratiom-pricing-grid--3col {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ratiom-pricing-grid--2col {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.ratiom-wont-list li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
}

.ratiom-wont-list li::before {
	content: "\00D7";
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.35);
}

.ratiom-why-right-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 16px;
	display: block;
}

.ratiom-why-right-label strong {
	color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------
   Founder name (below avatar, above badge)
   --------------------------------------------------------------------------- */

.ratiom-founder-name {
	font-family: 'Darker Grotesque', sans-serif;
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	color: #fff;
	margin: 0;
	letter-spacing: -0.01em;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   FAQ — minimal heading treatment for F.A.Q label style
   --------------------------------------------------------------------------- */

/* .ratiom-faq h2 letter-spacing handled by global H2 variables */

/* ---------------------------------------------------------------------------
   Pricing card — ensure full width at narrower viewports
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.ratiom-pricing-card {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Legal Page (Terms of Service, Privacy Policy)
   --------------------------------------------------------------------------- */

.ratiom-legal-page {
	padding-block: 80px 120px;
}

.ratiom-legal-content {
	max-width: 800px;
	margin-inline: auto;
	padding-inline: 24px;
	text-align: center;
}

@media (min-width: 1024px) {
	.ratiom-legal-content {
		padding-inline: 32px;
	}
}

.ratiom-legal-content h1 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
	margin-bottom: 12px;
}

.ratiom-legal-meta {
	color: var(--ratiom-text-muted);
	font-size: var(--type-small-size);
	margin-top: 0;
	margin-bottom: 56px;
}

.ratiom-legal-content h2 {
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	letter-spacing: var(--type-h3-ls);
	line-height: var(--type-h3-lh);
	margin-top: 48px;
	margin-bottom: 16px;
	color: #fff;
}

.ratiom-legal-content p {
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.8;
	margin-bottom: 16px;
}

.ratiom-legal-content ul,
.ratiom-legal-content ol {
	color: rgba(255, 255, 255, 0.65);
	padding-left: 0;
	margin-bottom: 16px;
	line-height: 1.8;
	list-style-position: inside;
}

.ratiom-legal-content li {
	margin-bottom: 8px;
}

.ratiom-legal-content li::marker {
	color: var(--ratiom-primary);
}

.ratiom-legal-content strong {
	color: #fff;
	font-weight: 600;
}

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

.ratiom-legal-content a:hover {
	color: var(--ratiom-primary-hover);
}

/* ---------------------------------------------------------------------------
   Swiss Layout Normalization
   --------------------------------------------------------------------------- */

.ratiom-section-header .ratiom-label {
	margin-bottom: var(--space-2);
}

.ratiom-section-header > *:last-child {
	margin-bottom: 0;
}

.ratiom-founder,
.ratiom-pricing,
.ratiom-fit {
	padding-block: var(--space-7);
}

.ratiom-problem-grid,
.ratiom-comparison-grid {
	gap: 24px;
}

.ratiom-problem-card,
.ratiom-comparison-card,
.ratiom-fit-card {
	height: 100%;
}

@media (max-width: 767px) {
	:root {
		--container-gutter: 16px;
	}

	.ratiom-section,
	.ratiom-problem,
	.ratiom-founder,
	.ratiom-pricing,
	.ratiom-fit,
	.ratiom-final-cta {
		padding-block: 40px;
	}

	.section-container {
		padding-inline: 16px;
	}

	.ratiom-section-header {
		margin-bottom: var(--space-3);
	}

	.ratiom-grid-2,
	.ratiom-grid-3,
	.ratiom-problem-grid,
	.ratiom-comparison-grid,
	.ratiom-hiw-compact,
	.ratiom-fit-grid {
		gap: 16px;
	}

	.ratiom-card,
	.ratiom-hiw-compact-step,
	.ratiom-pricing-card {
		padding: 20px;
	}

	.ratiom-hero-actions {
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
   34. Who It's For Section
   --------------------------------------------------------------------------- */

.ratiom-who-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 580px;
}

.ratiom-who-list li {
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.0625rem;
	line-height: 1.55;
	padding: 14px 0 14px 24px;
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ratiom-who-list li:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ratiom-who-list li::before {
	content: "•";
	color: var(--ratiom-primary);
	position: absolute;
	left: 0;
	font-size: 1.25em;
	line-height: 1.35;
}

/* Lime borders on fit assessment cards */
.ratiom-fit-card {
	border-color: rgba(196, 238, 24, 0.3);
}

.ratiom-fit-card:hover {
	border-color: rgba(196, 238, 24, 0.55);
}

@media (max-width: 767px) {
	.ratiom-who {
		padding-block: 40px;
	}
}

/* ---------------------------------------------------------------------------
   37. Local Rebuild Homepage
   --------------------------------------------------------------------------- */
.ratiom-transformation-section,
.ratiom-pricing-rebuild {
	background:
		radial-gradient(circle at 88% 12%, rgba(196, 238, 24, 0.11), transparent 30%),
		linear-gradient(180deg, #020202 0%, #070707 100%);
	overflow: hidden;
}

.ratiom-mockup-wrapper {
	position: relative;
	min-height: clamp(440px, 46vw, 620px);
	isolation: isolate;
}

.ratiom-mockup-wrapper::before {
	content: "";
	position: absolute;
	inset: 12% 0 -4% 8%;
	background: radial-gradient(circle, rgba(196, 238, 24, 0.17), transparent 58%);
	filter: blur(18px);
	z-index: -1;
}

.ratiom-mockup-laptop {
	position: absolute;
	left: 0;
	top: 4%;
	width: min(92%, 690px);
	padding: 12px 12px 22px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 26px 26px 18px 18px;
	background: linear-gradient(135deg, #1d1d1d, #070707 42%, #242424);
	box-shadow: 0 44px 90px rgba(0, 0, 0, 0.76);
	transform: perspective(1200px) rotateY(-7deg) rotateX(2deg);
}

.ratiom-mockup-laptop::after {
	content: "";
	position: absolute;
	left: 9%;
	right: 9%;
	bottom: -18px;
	height: 20px;
	border-radius: 0 0 28px 28px;
	background: linear-gradient(90deg, #0f0f0f, #555, #151515);
	opacity: 0.9;
}

.ratiom-mockup-frame {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 16px;
	background: #050505;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.ratiom-mockup-content {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding: 24px;
	color: #fff;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.24)),
		linear-gradient(135deg, rgba(196, 238, 24, 0.05), transparent 45%),
		linear-gradient(135deg, #18202a, #0b0b0b 58%);
}

.ratiom-mockup-header,
.ratiom-mockup-header-mobile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 800;
}

.ratiom-mockup-nav {
	color: rgba(255, 255, 255, 0.7);
}

.ratiom-mockup-nav span {
	display: inline-flex;
	margin-left: 10px;
	padding: 7px 10px;
	border-radius: 6px;
	background: var(--ratiom-primary);
	color: #000;
}

.ratiom-mockup-hero-section {
	max-width: 390px;
	margin-top: auto;
	padding-block: 44px 28px;
}

.ratiom-mockup-kicker {
	margin: 0 0 12px;
	color: var(--ratiom-primary);
	font-size: 0.74rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ratiom-mockup-headline,
.ratiom-mockup-headline-mobile {
	margin: 0;
	color: #fff;
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-lh);
	letter-spacing: var(--type-h3-ls);
}

.ratiom-mockup-features,
.ratiom-mockup-features-mobile {
	display: grid;
	gap: 6px;
	margin-top: 16px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.84rem;
}

.ratiom-mockup-features span::before,
.ratiom-mockup-features-mobile span::before,
.ratiom-pricing-bullets li span::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 12px;
	margin-right: 8px;
	border: solid var(--ratiom-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ratiom-mockup-cta-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
}

.ratiom-mockup-btn-primary,
.ratiom-mockup-btn-mobile,
.ratiom-after-btn {
	border: 0;
	border-radius: 7px;
	background: var(--ratiom-primary);
	color: #000;
	font-weight: 800;
	text-transform: uppercase;
	cursor: default;
}

.ratiom-mockup-btn-primary {
	padding: 12px 18px;
	font-size: 0.74rem;
}

.ratiom-mockup-phone,
.ratiom-mockup-phone-mobile,
.ratiom-after-phone {
	color: #fff;
	font-weight: 800;
}

.ratiom-mockup-reviews {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.72rem;
}

.ratiom-mockup-reviews div {
	display: grid;
	gap: 3px;
}

.ratiom-mockup-reviews small {
	color: rgba(255, 255, 255, 0.58);
	font-size: 0.68rem;
}

.ratiom-stars,
.ratiom-testimonial-stars,
.ratiom-mobile-rating {
	color: #93c900;
}

.ratiom-mockup-mobile {
	position: absolute;
	right: 4%;
	bottom: 2%;
	width: min(31%, 210px);
	padding: 9px;
	border-radius: 28px;
	background: linear-gradient(135deg, #1f1f1f, #030303);
	border: 1px solid rgba(255, 255, 255, 0.26);
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.75);
	z-index: 2;
}

.ratiom-mockup-frame-mobile {
	aspect-ratio: 9 / 19;
	overflow: hidden;
	border-radius: 21px;
	background: #050505;
}

.ratiom-mockup-content-mobile {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 14px;
	color: #fff;
	background: linear-gradient(160deg, rgba(196, 238, 24, 0.08), transparent 40%), #080808;
}

.ratiom-mockup-headline-mobile {
	font-size: 1.06rem;
	margin-top: 24px;
}

.ratiom-mockup-features-mobile {
	font-size: 0.7rem;
}

.ratiom-mockup-btn-mobile {
	padding: 10px 8px;
	font-size: 0.66rem;
}

.ratiom-mockup-phone-mobile,
.ratiom-mobile-rating {
	font-size: 0.72rem;
}

.ratiom-mockup-callout {
	position: absolute;
	right: 0;
	top: 8%;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 178px;
	color: #fff;
	font-size: 0.95rem;
	line-height: 1.3;
	z-index: 3;
}

.ratiom-mockup-callout svg {
	color: var(--ratiom-primary);
}

.ratiom-industries,
.ratiom-simple-process,
.ratiom-testimonials-section {
	background: #f7f7f2;
	color: #060606;
}

.ratiom-industries {
	padding-block: 34px;
}

.ratiom-industries .section-container {
	text-align: center;
}

.ratiom-industries .ratiom-section-headline,
.ratiom-simple-process .ratiom-section-headline,
.ratiom-testimonials-section .ratiom-section-headline {
	color: #060606;
}

.ratiom-industries .ratiom-section-headline {
	font-size: var(--type-h2-size);
	margin: 0;
}

.ratiom-industries-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	margin: 0 0 20px;
}

.ratiom-industry-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: #0d0d0d;
}

.ratiom-industry-icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	color: #c4ee18;
}

.ratiom-industry-card h3 {
	margin: 0;
	color: #0d0d0d;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.82rem;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.ratiom-industry-card h3 {
		white-space: normal;
		word-break: break-word;
	}
}

.ratiom-industries-supporting-text {
	max-width: 760px;
	margin: 0 auto;
	color: rgba(0, 0, 0, 0.68);
	font-size: 0.98rem;
}

@media (max-width: 900px) {
	.ratiom-industries-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.ratiom-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ratiom-transformation-section {
	padding-block: clamp(58px, 7vw, 86px);
}


.ratiom-transformation-headline,
.ratiom-pricing-rebuild .ratiom-section-headline {
	margin: 0 0 28px;
	color: #fff;
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

.ratiom-transformation-problems,
.ratiom-pricing-bullets {
	display: grid;
	gap: 14px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ratiom-transformation-problems li,
.ratiom-pricing-bullets li {
	display: flex;
	align-items: center;
	gap: 11px;
	color: rgba(255, 255, 255, 0.84);
	font-size: 0.98rem;
	line-height: 1.45;
}

.ratiom-x-dot {
	position: relative;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border: 1px solid var(--ratiom-primary);
	border-radius: 999px;
}

.ratiom-x-dot::before,
.ratiom-x-dot::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 10px;
	width: 9px;
	height: 1.5px;
	background: var(--ratiom-primary);
}

.ratiom-x-dot::before {
	transform: rotate(45deg);
}

.ratiom-x-dot::after {
	transform: rotate(-45deg);
}

/* ── Before/after image comparison slider ── */
.ratiom-ba-wrap {
	margin-top: 48px;
	border-radius: var(--ratiom-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ratiom-border);
	box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
}

.ratiom-ba-slider {
	position: relative;
	display: block;
	overflow: hidden;
	user-select: none;
	cursor: col-resize;
	touch-action: pan-y;
	line-height: 0;
}

.ratiom-ba-slider.is-dragging {
	cursor: grabbing;
}

.ratiom-ba-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
}

.ratiom-ba-img--before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ratiom-ba-before-clip {
	position: absolute;
	inset: 0;
	clip-path: inset(0 50% 0 0);
	pointer-events: none;
	overflow: hidden;
	line-height: 0;
}

.ratiom-ba-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	background: #c4ee18;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.ratiom-ba-handle {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #000;
	border: 2px solid #c4ee18;
	color: #c4ee18;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: col-resize;
	pointer-events: all;
	flex-shrink: 0;
	z-index: 3;
	padding: 0;
	box-shadow: 0 0 0 4px rgba(196, 238, 24, 0.15), 0 4px 20px rgba(0, 0, 0, 0.6);
	outline: none;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.ratiom-ba-handle:focus-visible {
	box-shadow: 0 0 0 4px rgba(196, 238, 24, 0.5);
}

.ratiom-ba-slider.is-dragging .ratiom-ba-handle {
	transform: scale(1.1);
}

.ratiom-ba-label {
	position: absolute;
	top: 16px;
	padding: 5px 12px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 3;
	line-height: 1;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
}

.ratiom-ba-label--before {
	left: 16px;
	background: rgba(255, 68, 68, 0.18);
	color: #ff6b6b;
	border: 1px solid rgba(255, 68, 68, 0.3);
}

.ratiom-ba-label--after {
	right: 16px;
	background: rgba(196, 238, 24, 0.15);
	color: #c4ee18;
	border: 1px solid rgba(196, 238, 24, 0.25);
}

/* Mobile stacked layout */
.ratiom-ba-mobile-stack {
	display: none;
	flex-direction: column;
	gap: 32px;
	margin-top: 48px;
}

.ratiom-ba-mobile-item {
	display: flex;
	flex-direction: column;
}

.ratiom-ba-mobile-label {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
}

.ratiom-ba-mobile-label--before {
	color: #ff6b6b;
}

.ratiom-ba-mobile-label--after {
	color: #c4ee18;
}

.ratiom-ba-mobile-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ratiom-radius);
	border: 1px solid var(--ratiom-border);
}

@media (max-width: 767px) {
	.ratiom-ba-wrap {
		display: none;
	}
	.ratiom-ba-mobile-stack {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ratiom-ba-handle {
		transition: none;
	}
}

.ratiom-simple-process {
	padding-block: clamp(60px, 7vw, 86px);
}

.ratiom-simple-process .ratiom-label,
.ratiom-testimonials-section .ratiom-label {
	color: #486000;
	border-color: rgba(72, 96, 0, 0.2);
	background: rgba(196, 238, 24, 0.16);
}

.ratiom-simple-process .ratiom-accent,
.ratiom-testimonials-section .ratiom-accent {
	color: #7aaa00;
}

.ratiom-process-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-top: 54px;
}

.ratiom-process-steps::before {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	top: 47px;
	border-top: 2px dashed rgba(0, 0, 0, 0.14);
}

.ratiom-process-step {
	position: relative;
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 10px;
}

.ratiom-process-icon {
	width: 96px;
	height: 96px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #fbfbf8;
	color: #0d0d0d;
	z-index: 1;
}

.ratiom-process-number {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	margin-top: -24px;
	border-radius: 999px;
	background: var(--ratiom-primary);
	color: #111;
	font-size: 0.82rem;
	font-weight: 900;
	z-index: 2;
}

.ratiom-process-title {
	margin: 4px 0 0;
	color: #050505;
	font-size: 1rem;
	letter-spacing: 0;
}

.ratiom-process-description {
	max-width: 220px;
	margin: 0;
	color: rgba(0, 0, 0, 0.68);
	font-size: 0.9rem;
	line-height: 1.6;
}

.ratiom-pricing-rebuild {
	padding-block: clamp(62px, 7vw, 92px);
}

.ratiom-pricing-rebuild-inner {
	display: grid;
	grid-template-columns: minmax(220px, 0.75fr) minmax(300px, 0.9fr) minmax(300px, 1.05fr);
	gap: clamp(28px, 4vw, 44px);
	align-items: center;
}

.ratiom-pricing-bullets li span {
	width: 20px;
}

.ratiom-pricing-main-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: clamp(28px, 3vw, 38px);
	border: 1.5px solid var(--ratiom-primary);
	border-radius: 8px;
	background: linear-gradient(150deg, rgba(196, 238, 24, 0.08), rgba(255, 255, 255, 0.02) 36%, rgba(255, 255, 255, 0.04));
	box-shadow: 0 0 46px rgba(196, 238, 24, 0.09);
}

.ratiom-pricing-label {
	position: absolute;
	left: 50%;
	top: -14px;
	transform: translateX(-50%);
	padding: 6px 18px;
	border-radius: 999px;
	background: var(--ratiom-primary);
	color: #000;
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ratiom-pricing-title {
	margin: 0;
	color: #fff;
	font-size: 1.15rem;
	letter-spacing: 0;
}

.ratiom-pricing-amount {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	color: #fff;
}

.ratiom-pricing-currency {
	margin-top: 9px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 800;
}

.ratiom-pricing-number {
	color: #fff;
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

.ratiom-pricing-period {
	margin: -8px 0 0;
	color: var(--ratiom-primary);
	font-size: 0.88rem;
	font-weight: 800;
}

.ratiom-pricing-description {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.92rem;
	line-height: 1.65;
}

.ratiom-pricing-includes {
	display: grid;
	gap: 9px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ratiom-pricing-includes li {
	display: flex;
	gap: 9px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.9rem;
	line-height: 1.35;
}


.ratiom-pricing-cta {
	justify-content: center;
	width: 100%;
	margin-top: 6px;
	border-radius: 7px;
}

.ratiom-pricing-addons {
	display: grid;
	gap: 14px;
}

.ratiom-pricing-addons-title {
	margin: 0 0 4px;
	color: var(--ratiom-primary);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ratiom-pricing-addons-title span {
	color: inherit;
}

.ratiom-addon-card {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.045);
}

.ratiom-addon-icon {
	height: 76px;
	display: grid;
	place-items: center;
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(196, 238, 24, 0.13), rgba(255, 255, 255, 0.05));
	color: var(--ratiom-primary);
}

.ratiom-addon-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ratiom-addon-header h4 {
	margin: 0;
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0;
}

.ratiom-addon-price {
	color: #fff;
	font-weight: 800;
	white-space: nowrap;
}

.ratiom-addon-description {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.88rem;
	line-height: 1.55;
}

.ratiom-testimonials-section {
	padding-block: clamp(58px, 7vw, 86px);
}

.ratiom-founder-local {
	background: #050505;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ratiom-founder-local .ratiom-founder-inner {
	max-width: 980px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 44px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(196, 238, 24, 0.06), rgba(255, 255, 255, 0.025));
}

.ratiom-founder-local .ratiom-founder-bio h2 {
	max-width: 720px;
}

.ratiom-founder-local .ratiom-founder-bio p {
	color: rgba(255, 255, 255, 0.72);
}

.ratiom-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 36px;
}

.ratiom-testimonial-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 28px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.ratiom-testimonial-stars {
	font-size: 1.1rem;
	letter-spacing: 0.06em;
}

.ratiom-testimonial-text {
	margin: 0;
	color: #1a1a1a;
	font-size: var(--type-small-size);
	font-weight: 500;
	line-height: var(--type-small-lh);
}

.ratiom-testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.ratiom-testimonial-avatar {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: linear-gradient(135deg, #333, #777);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 900;
}

.ratiom-testimonial-name {
	color: #000;
	font-weight: 900;
	line-height: 1.2;
}

.ratiom-testimonial-title {
	color: rgba(0, 0, 0, 0.62);
	font-size: 0.84rem;
	line-height: 1.35;
}

.ratiom-faq-local {
	background: #050505;
}

.ratiom-faq-local .ratiom-section-header {
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.ratiom-faq-local .ratiom-section-header h2 {
	margin-top: 14px;
}

.ratiom-faq-local .ratiom-faq-list {
	margin-top: 28px;
}

.ratiom-faq-local .ratiom-faq-item {
	border-color: rgba(255, 255, 255, 0.1);
}

.ratiom-faq-local .ratiom-faq-question {
	padding-block: 20px;
}

.ratiom-final-cta-section {
	padding-block: 34px 26px;
	background: #050505;
}

.ratiom-final-cta-box {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	padding: clamp(22px, 3vw, 34px);
	border-radius: 8px;
	background: linear-gradient(135deg, #c4ee18, #d4ff28);
	color: #000;
}

.ratiom-final-cta-icon {
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.08);
	color: #000;
}

.ratiom-final-cta-headline {
	max-width: 700px;
	margin: 0;
	color: #000;
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

.ratiom-final-cta-subheadline {
	margin: 8px 0 0;
	color: rgba(0, 0, 0, 0.78);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

.ratiom-final-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0.95rem 1.4rem;
	border-radius: 9999px;
	background: #050505;
	color: #fff;
	font-size: var(--type-btn-size);
	font-weight: var(--type-btn-weight);
	letter-spacing: var(--type-btn-ls);
	text-decoration: none;
	white-space: nowrap;
}

.ratiom-final-cta-btn:hover {
	color: var(--ratiom-primary);
	background: #111;
}

.ratiom-final-cta-trust {
	grid-column: 2 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 26px;
	color: rgba(0, 0, 0, 0.82);
	font-size: 0.88rem;
	font-weight: 700;
}

.ratiom-final-cta-trust span::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 10px;
	margin-right: 8px;
	border: solid #000;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ratiom-nav-wrapper {
	transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ratiom-site-header.is-scrolled .ratiom-nav-wrapper {
	background: rgba(0, 0, 0, 0.72);
	border-bottom-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1180px) {
	.ratiom-mockup-wrapper {
		max-width: 760px;
		margin-inline: auto;
	}

	.ratiom-pricing-rebuild-inner {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.ratiom-pricing-rebuild-copy {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.ratiom-pricing-rebuild-inner {
		grid-template-columns: 1fr;
	}

	.ratiom-process-steps,
	.ratiom-testimonials-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ratiom-process-steps::before {
		display: none;
	}

	.ratiom-final-cta-box {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.ratiom-final-cta-trust {
		grid-column: auto;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	:root {
		--site-header-height: 58px;
	}
	.ratiom-mockup-wrapper {
		min-height: 430px;
	}

	.ratiom-mockup-laptop {
		width: 100%;
		top: 0;
		padding: 8px 8px 16px;
		border-radius: 18px;
		transform: none;
	}

	.ratiom-mockup-content {
		padding: 16px;
	}

	.ratiom-mockup-nav {
		display: none;
	}

	.ratiom-mockup-hero-section {
		padding-block: 34px 22px;
	}

	.ratiom-mockup-reviews {
		grid-template-columns: 1fr 1fr;
	}

	.ratiom-mockup-mobile {
		width: 36%;
		right: 0;
		bottom: 4%;
	}

	.ratiom-mockup-callout {
		top: auto;
		right: 42%;
		bottom: 0;
		max-width: 160px;
		font-size: 0.82rem;
	}

	.ratiom-process-steps,
	.ratiom-testimonials-grid {
		grid-template-columns: 1fr;
	}

	.ratiom-addon-card {
		grid-template-columns: 58px minmax(0, 1fr);
	}

	.ratiom-addon-icon {
		height: 58px;
	}

	.ratiom-final-cta-btn {
		width: 100%;
		white-space: normal;
	}
}

@media (max-width: 380px) {
	.ratiom-mockup-wrapper {
		min-height: 390px;
	}

	.ratiom-mockup-mobile {
		width: 42%;
	}

	.ratiom-mockup-callout {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   38. Local Rebuild Homepage - Reference Match Refinements
   --------------------------------------------------------------------------- */

body.home .ratiom-industries .section-container,
body.home .ratiom-transformation-section .section-container,
body.home .ratiom-simple-process .section-container,
body.home .ratiom-pricing-rebuild .section-container,
body.home .ratiom-testimonials-section .section-container,
body.home .ratiom-final-cta-section .section-container {
	max-width: 1240px;
}

body.home .ratiom-home-anchor {
	position: relative;
	top: -72px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	pointer-events: none;
}

body.home .ratiom-label {
	border-radius: 999px;
	padding: 5px 11px;
	font-size: 0.64rem;
	font-weight: 900;
	letter-spacing: 0.1em;
}

body.home .ratiom-mockup-wrapper {
	min-height: 620px;
	margin-right: -48px;
}

body.home .ratiom-mockup-laptop {
	width: min(94%, 780px);
	top: 4%;
	left: 0;
	padding: 12px 12px 24px;
	border-radius: 24px 24px 18px 18px;
	transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
}

body.home .ratiom-mockup-frame {
	aspect-ratio: 16 / 9.7;
}

body.home .ratiom-mockup-content {
	padding: 24px 28px;
}

body.home .ratiom-mockup-hero-section {
	max-width: 430px;
	padding-block: 70px 42px;
}

body.home .ratiom-mockup-headline {
	font-size: clamp(2rem, 2.65vw, 2.7rem);
}

body.home .ratiom-mockup-reviews {
	grid-template-columns: 1.35fr repeat(3, 1fr);
	padding-top: 18px;
}

body.home .ratiom-mockup-mobile {
	width: min(30%, 225px);
	right: 3%;
	bottom: 6%;
}

body.home .ratiom-mockup-callout {
	top: 5%;
	right: 0;
	max-width: 150px;
	font-size: 0.98rem;
}


body.home .ratiom-transformation-headline {
	margin-bottom: 26px;
}


/* font-size + line-height handled by global type system (FINAL PRECISION POLISH) */

body.home .ratiom-process-steps {
	margin-top: 32px;
	gap: 44px;
}

body.home .ratiom-process-icon {
	width: 90px;
	height: 90px;
}

/* process-title + process-description font-size/lh set in FINAL PRECISION POLISH → var(--type-small-*) */

body.home .ratiom-pricing-rebuild-inner {
	grid-template-columns: minmax(220px, 0.78fr) minmax(300px, 0.9fr) minmax(380px, 1.22fr);
	gap: 32px;
	align-items: center;
}

body.home .ratiom-pricing-rebuild .ratiom-section-headline {
	margin-block: 16px 28px;
	/* font-size → var(--type-h2-size) via global type system */
}

body.home .ratiom-pricing-bullets {
	gap: 15px;
}

body.home .ratiom-pricing-bullets li {
	font-size: 0.9rem;
}

body.home .ratiom-pricing-main-card {
	min-height: 430px;
	padding: 34px 30px 26px;
	border-radius: 7px;
}

/* pricing-number font-size → var(--type-h2-size) via section 39 + canonical layout */

body.home .ratiom-pricing-includes li {
	font-size: 0.82rem;
}

body.home .ratiom-addon-card {
	min-height: 112px;
	grid-template-columns: 112px minmax(0, 1fr);
	padding: 15px;
}

body.home .ratiom-addon-icon {
	height: 84px;
}

body.home .ratiom-testimonials-section .section-container {
	display: grid;
	grid-template-columns: minmax(220px, 0.68fr) minmax(0, 2fr);
	gap: 34px;
	align-items: center;
}

body.home .ratiom-testimonials-heading .ratiom-section-headline {
	margin-top: 18px;
	/* font-size + line-height → var(--type-h2-*) via POLISH PASS */
}

body.home .ratiom-testimonials-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 0;
}

body.home .ratiom-testimonial-card {
	min-height: 222px;
	padding: 24px;
}

/* testimonial-text font-size + lh → var(--type-small-*) via FINAL PRECISION POLISH */

body.home .ratiom-final-cta-box {
	grid-template-columns: 76px minmax(0, 1fr) 260px;
	gap: 24px;
	padding: 24px 34px;
}

/* final-cta-headline font-size → var(--type-h2-size) via Premium All-Dark pass */

body.home .ratiom-final-cta-trust {
	grid-column: 2 / -1;
	margin-top: -6px;
}

@media (max-width: 1180px) {
	body.home .ratiom-pricing-rebuild-inner,
	body.home .ratiom-testimonials-section .section-container {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-mockup-wrapper {
		max-width: 820px;
		margin: 0 auto;
	}

	body.home .ratiom-pricing-rebuild-copy {
		grid-column: auto;
	}
}

@media (max-width: 900px) {
	body.home .ratiom-testimonials-grid {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-process-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	body.home .ratiom-final-cta-box {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	body.home .ratiom-final-cta-trust {
		grid-column: auto;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	body.home .ratiom-mockup-wrapper {
		min-height: 438px;
		margin-top: 14px;
	}

	body.home .ratiom-mockup-laptop {
		width: 100%;
		transform: none;
	}

	body.home .ratiom-mockup-content {
		padding: 15px;
	}

	body.home .ratiom-mockup-hero-section {
		padding-block: 30px 18px;
	}

	body.home .ratiom-mockup-headline {
		font-size: 1.55rem;
	}

	body.home .ratiom-mockup-reviews {
		grid-template-columns: repeat(2, 1fr);
	}

	body.home .ratiom-mockup-mobile {
		width: 39%;
		right: 0;
		bottom: 5%;
	}

	body.home .ratiom-mockup-callout {
		display: none;
	}

	body.home .ratiom-process-steps {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-addon-card {
		grid-template-columns: 64px 1fr;
	}

	body.home .ratiom-addon-icon {
		height: 64px;
	}

	body.home .ratiom-final-cta-box {
		padding: 24px 18px;
	}

	body.home .ratiom-final-cta-btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   39. Professional 2026 Homepage Polish
   Strict 8px rhythm, calmer premium cards, and CRO trust sections.
   --------------------------------------------------------------------------- */

body.home {
	--r-home-container: 1280px;
	--r-home-gutter: 32px;
	--r-home-gutter-mobile: 20px;
	--r-home-section-sm: 64px;
	--r-home-section-md: 96px;
	--r-home-card-border: rgba(255, 255, 255, 0.12);
	--r-home-card-bg: rgba(255, 255, 255, 0.045);
	--r-home-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

body.home .section-container {
	width: 100%;
	max-width: var(--r-home-container);
	padding-inline: var(--r-home-gutter);
}

body.home .ratiom-mockup-wrapper {
	min-height: 560px;
	margin-right: 0;
}

body.home .ratiom-mockup-laptop {
	width: min(88%, 704px);
	left: 8px;
	top: 32px;
	box-shadow: 0 32px 88px rgba(0, 0, 0, 0.68);
}

body.home .ratiom-mockup-mobile {
	width: min(28%, 200px);
	right: 16px;
	bottom: 32px;
}

body.home .ratiom-mockup-callout {
	right: 8px;
	top: 24px;
}

body.home .ratiom-industries-supporting-text {
	font-size: var(--type-body-size);
}


body.home .ratiom-transformation-headline,
body.home .ratiom-pricing-rebuild .ratiom-section-headline,
body.home .ratiom-simple-process .ratiom-section-headline,
body.home .ratiom-testimonials-heading .ratiom-section-headline,
body.home .ratiom-included-heading h2,
body.home .ratiom-fail-copy h2 {
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
}

body.home .ratiom-fail-local {
	background: #f7f7f2;
	color: #050505;
}

body.home .ratiom-fail-inner {
	display: grid;
	grid-template-columns: minmax(260px, 0.38fr) minmax(0, 0.62fr);
	gap: 64px;
	align-items: start;
}

body.home .ratiom-fail-copy h2,
body.home .ratiom-included-heading h2 {
	margin: 16px 0 0;
	color: #050505;
	letter-spacing: -0.025em;
}

body.home .ratiom-fail-copy p {
	max-width: 480px;
	margin: 24px 0 0;
	color: rgba(0, 0, 0, 0.68);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

body.home .ratiom-fail-local .ratiom-label,
body.home .ratiom-included-local .ratiom-label {
	color: #425800;
	border-color: rgba(66, 88, 0, 0.22);
	background: rgba(196, 238, 24, 0.18);
}

body.home .ratiom-fail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

body.home .ratiom-fail-card {
	min-height: 216px;
	padding: 24px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.055);
}

body.home .ratiom-fail-card h3,
body.home .ratiom-included-card h3 {
	margin: 0;
	/* font-size + letter-spacing → var(--type-h3-*) via FINAL PRECISION POLISH */
	/* color → #fff via Premium All-Dark pass */
}

body.home .ratiom-fail-card p,
body.home .ratiom-included-card p {
	margin: 12px 0 0;
	color: rgba(0, 0, 0, 0.66);
	font-size: 0.9375rem;
	line-height: 1.65;
}

body.home .ratiom-fail-card strong {
	display: block;
	margin-top: 24px;
	color: #425800;
	font-size: 0.875rem;
	line-height: 1.45;
}

body.home .ratiom-process-steps {
	gap: 32px;
	margin-top: 48px;
}

body.home .ratiom-process-step {
	min-height: 264px;
	padding: 32px 24px 24px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.055);
}

body.home .ratiom-process-steps::before {
	top: 76px;
	left: 16%;
	right: 16%;
}

body.home .ratiom-process-icon {
	width: 88px;
	height: 88px;
}

body.home .ratiom-process-number {
	width: 32px;
	height: 32px;
	margin-top: -28px;
}

/* font-size handled by FINAL PRECISION POLISH → var(--type-small-size) */

/* process-description font-size handled in FINAL PRECISION POLISH */

body.home .ratiom-included-local {
	background:
		radial-gradient(circle at 88% 18%, rgba(196, 238, 24, 0.08), transparent 26%),
		#050505;
}

body.home .ratiom-included-heading {
	max-width: 780px;
	margin-bottom: 48px;
}

body.home .ratiom-included-heading h2 {
	color: #fff;
}

body.home .ratiom-included-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

body.home .ratiom-included-card {
	min-height: 208px;
	padding: 24px;
	border: 1px solid var(--r-home-card-border);
	border-radius: 8px;
	background: var(--r-home-card-bg);
}

body.home .ratiom-included-card h3 {
	margin-top: 24px;
	color: #fff;
}

body.home .ratiom-included-card p {
	color: rgba(255, 255, 255, 0.66);
}

body.home .ratiom-included-icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--ratiom-primary-border);
	border-radius: 999px;
	background: rgba(196, 238, 24, 0.08);
	color: var(--ratiom-primary);
	font-size: 0.75rem;
	font-weight: 900;
}

body.home .ratiom-pricing-rebuild-inner {
	grid-template-columns: minmax(240px, 0.75fr) minmax(360px, 0.95fr) minmax(400px, 1.2fr);
	gap: 48px;
}

body.home .ratiom-pricing-main-card {
	min-height: 560px;
	padding: 48px 40px 32px;
}

body.home .ratiom-pricing-label {
	top: -16px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}

body.home .ratiom-pricing-title {
	font-size: 1.25rem;
}

body.home .ratiom-pricing-number {
	font-size: var(--type-h2-size);
}

body.home .ratiom-pricing-description,
body.home .ratiom-pricing-includes li,
body.home .ratiom-addon-description {
	font-size: 0.9375rem;
}

body.home .ratiom-pricing-includes {
	gap: 12px;
	margin-top: 8px;
}

body.home .ratiom-pricing-cta {
	margin-top: auto;
}

body.home .ratiom-pricing-addons {
	gap: 16px;
}

body.home .ratiom-addon-card {
	min-height: 136px;
	grid-template-columns: 120px minmax(0, 1fr);
	padding: 20px;
}

body.home .ratiom-addon-icon {
	height: 96px;
}

body.home .ratiom-testimonials-section .section-container {
	grid-template-columns: minmax(280px, 0.34fr) minmax(0, 0.66fr);
	gap: 64px;
}

body.home .ratiom-testimonials-grid {
	gap: 24px;
}

body.home .ratiom-testimonial-card {
	min-height: 280px;
	padding: 32px;
}

body.home .ratiom-testimonial-avatar {
	width: 56px;
	height: 56px;
}

body.home .ratiom-final-cta-box {
	grid-template-columns: 80px minmax(0, 1fr) 280px;
	gap: 32px;
	padding: 32px 48px;
}

@media (max-width: 1180px) {
	body.home .ratiom-founder-local .ratiom-founder-inner,
	body.home .ratiom-fail-inner,
	body.home .ratiom-pricing-rebuild-inner,
	body.home .ratiom-testimonials-section .section-container {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-mockup-wrapper {
		max-width: 760px;
	}

	body.home .ratiom-pricing-main-card {
		max-width: 560px;
	}

	body.home .ratiom-pricing-addons {
		max-width: 680px;
	}
}

@media (max-width: 900px) {
	body.home .section-container {
		padding-inline: 24px;
	}

	body.home .ratiom-included-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .ratiom-fail-grid,
	body.home .ratiom-process-steps,
	body.home .ratiom-testimonials-grid {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-founder-trust-badges {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body.home {
		--r-home-gutter: var(--r-home-gutter-mobile);
	}

	body.home .section-container {
		padding-inline: var(--r-home-gutter-mobile);
	}

	body.home .ratiom-included-grid,
	body.home .ratiom-founder-trust-badges {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-industry-card,
	body.home .ratiom-fail-card,
	body.home .ratiom-process-step,
	body.home .ratiom-included-card,
	body.home .ratiom-testimonial-card {
		min-height: auto;
	}

	body.home .ratiom-founder-local .ratiom-founder-inner,
	body.home .ratiom-pricing-main-card {
		padding: 32px 24px;
	}

	body.home .ratiom-addon-card {
		grid-template-columns: 72px 1fr;
		min-height: auto;
	}

	body.home .ratiom-final-cta-box {
		padding: 32px 24px;
	}
}

/* ---------------------------------------------------------------------------
   40. Reframe Local Homepage Art Direction Pass
   Final scoped layer for the premium local service rebuild homepage.
   --------------------------------------------------------------------------- */

body.home {
	--r-home-container: 1280px;
	--r-home-gutter: 32px;
	--r-home-gutter-tablet: 24px;
	--r-home-gutter-mobile: 20px;
	--r-home-lime: #c4ee18;
	--r-home-cream: #f7f7f2;
	--r-home-ink: #050505;
	--r-home-panel: #101010;
	--r-home-border: rgba(255, 255, 255, 0.12);
	--r-home-border-dark: rgba(0, 0, 0, 0.1);
	--r-home-radius: 8px;
	--r-home-shadow: 0 24px 72px rgba(0, 0, 0, 0.18);
	background: #000;
}

body.home .section-container {
	max-width: var(--r-home-container);
	padding-inline: var(--r-home-gutter);
}

body.home .ratiom-section-headline,
body.home .ratiom-transformation-headline,
body.home .ratiom-founder-bio h2,
body.home .ratiom-fail-copy h2,
body.home .ratiom-included-heading h2,
body.home .ratiom-who h2 {
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

body.home .ratiom-label {
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
}

body.home .ratiom-btn-primary,
body.home .ratiom-btn-secondary,
body.home .ratiom-final-cta-btn {
	min-height: 56px;
	border-radius: var(--r-home-radius);
	padding: 16px 24px;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

body.home .ratiom-btn-primary:hover,
body.home .ratiom-final-cta-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(196, 238, 24, 0.24);
}

body.home .ratiom-trust-strip {
	padding-block: 16px 20px;
	background: #050505;
	border-block: 1px solid rgba(255, 255, 255, 0.08);
}

body.home .ratiom-trust-strip-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	border-inline: 1px solid rgba(255, 255, 255, 0.08);
}

body.home .ratiom-trust-strip-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 16px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.875rem;
	font-weight: 800;
	text-align: center;
	line-height: 1.35;
}

body.home .ratiom-trust-strip-item:last-child {
	border-right: 0;
}

body.home .ratiom-trust-strip-item span,
body.home .ratiom-pricing-bullets li span {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--r-home-lime);
	box-shadow: 0 0 0 5px rgba(196, 238, 24, 0.11);
	flex: 0 0 8px;
}

body.home .ratiom-included-card:hover,
body.home .ratiom-addon-card:hover,
body.home .ratiom-testimonial-card:hover {
	transform: translateY(-3px);
	border-color: rgba(196, 238, 24, 0.55);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1);
}

body.home .ratiom-industries-supporting-text {
	max-width: 560px;
	margin-inline: auto;
	text-align: center;
}

body.home .ratiom-transformation-section {
	background: #000;
}

body.home .ratiom-transformation-header {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(320px, 0.3fr);
	gap: 64px;
	align-items: end;
	margin-bottom: 56px;
}

body.home .ratiom-transformation-header .ratiom-label {
	grid-column: 1 / -1;
	width: fit-content;
	margin-bottom: -32px;
}

body.home .ratiom-transformation-headline {
	max-width: 820px;
	margin: 0;
	color: #fff;
}

body.home .ratiom-transformation-header p {
	margin: 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

body.home .ratiom-ba-wrap {
	border-radius: var(--r-home-radius);
}

body.home .ratiom-founder-local {
	background:
		radial-gradient(circle at 18% 50%, rgba(196, 238, 24, 0.08), transparent 28%),
		#050505;
}

body.home .ratiom-founder-local .ratiom-founder-inner {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	max-width: 1120px;
	margin-inline: auto;
	padding: 48px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--r-home-radius);
	background: #0d0d0d;
	box-shadow: 0 28px 88px rgba(0, 0, 0, 0.32);
}

body.home .ratiom-founder-avatar-col {
	align-items: center;
}

body.home .ratiom-founder-local .ratiom-founder-avatar {
	width: 240px;
	height: 240px;
	border: 1px solid rgba(196, 238, 24, 0.3);
	border-radius: var(--r-home-radius);
	box-shadow: 0 0 0 12px rgba(196, 238, 24, 0.06);
}

body.home .ratiom-founder-badge {
	margin-top: 24px;
	border-radius: 999px;
	font-size: 14px;
	opacity: 0.6;
}

body.home .ratiom-founder-name {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
}

body.home .ratiom-founder-role {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	letter-spacing: 0.04em;
}

body.home .ratiom-founder-bio h2 {
	margin: 16px 0 24px;
	color: #fff;
}

body.home .ratiom-founder-bio p {
	max-width: 720px;
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

body.home .ratiom-founder-trust-badges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 32px;
	margin-bottom: 24px;
}

body.home .ratiom-founder-credential {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--r-home-radius);
	background: rgba(255, 255, 255, 0.045);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	font-weight: 700;
}

.ratiom-founder-credential-icon {
	flex: 0 0 auto;
	color: var(--ratiom-primary);
}

.ratiom-founder-cta-icon {
	flex-shrink: 0;
	opacity: 0.75;
}


body.home .ratiom-fail-local,
body.home .ratiom-simple-process,
body.home .ratiom-testimonials-section {
	background: var(--r-home-cream);
	color: var(--r-home-ink);
}

body.home .ratiom-fail-inner {
	display: grid;
	grid-template-columns: minmax(280px, 0.38fr) minmax(0, 0.62fr);
	gap: 64px;
	align-items: start;
}

body.home .ratiom-fail-copy h2,
body.home .ratiom-simple-process .ratiom-section-headline,
body.home .ratiom-testimonials-heading .ratiom-section-headline {
	margin: 16px 0 0;
	color: var(--r-home-ink);
}

body.home .ratiom-fail-copy p {
	margin: 24px 0 0;
	color: rgba(0, 0, 0, 0.68);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

body.home .ratiom-fail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

body.home .ratiom-fail-card {
	min-height: 240px;
	padding: 32px;
	border: 1px solid var(--r-home-border-dark);
	border-radius: var(--r-home-radius);
	background: #fff;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.home .ratiom-fail-card h3,
body.home .ratiom-process-title,
body.home .ratiom-testimonial-name {
	color: var(--r-home-ink);
}

body.home .ratiom-fail-card p,
body.home .ratiom-process-description,
body.home .ratiom-testimonial-title {
	color: rgba(0, 0, 0, 0.65);
}

body.home .ratiom-fail-card strong {
	display: block;
	margin-top: 24px;
	color: #4b6400;
	font-size: 0.9rem;
}


body.home .ratiom-process-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 48px;
}

body.home .ratiom-process-step {
	min-height: 280px;
	padding: 32px 24px 24px;
	border: 1px solid var(--r-home-border-dark);
	border-radius: var(--r-home-radius);
	background: #fff;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
}

body.home .ratiom-process-icon {
	width: 72px;
	height: 72px;
	border-radius: var(--r-home-radius);
	background: rgba(196, 238, 24, 0.15);
	color: #c4ee18;
}

body.home .ratiom-process-number {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: -28px auto 0;
	border-radius: 999px;
	background: #000;
	color: var(--r-home-lime);
	font-weight: 900;
}

body.home .ratiom-included-local,
body.home .ratiom-pricing-rebuild,
body.home .ratiom-faq-local {
	background: #050505;
}

body.home .ratiom-included-heading {
	max-width: 820px;
	margin-bottom: 48px;
}

body.home .ratiom-included-heading h2 {
	margin: 16px 0 0;
	color: #fff;
}

body.home .ratiom-included-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

body.home .ratiom-included-card {
	min-height: 232px;
	padding: 28px;
	border: 1px solid var(--r-home-border);
	border-radius: var(--r-home-radius);
	background: rgba(255, 255, 255, 0.045);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.home .ratiom-included-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(196, 238, 24, 0.24);
	border-radius: 999px;
	background: rgba(196, 238, 24, 0.08);
	color: var(--r-home-lime);
	font-size: 0.75rem;
	font-weight: 900;
}

body.home .ratiom-included-card h3 {
	margin: 24px 0 0;
	color: #fff;
}

body.home .ratiom-included-card p {
	color: rgba(255, 255, 255, 0.66);
}

body.home .ratiom-who {
	background: var(--r-home-cream);
	color: var(--r-home-ink);
}

body.home .ratiom-who .ratiom-section-header {
	max-width: 840px;
	margin-inline: auto;
	text-align: center;
}

body.home .ratiom-who h2 {
	margin-top: 16px;
	color: var(--r-home-ink);
}

body.home .ratiom-fit-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 48px;
}

body.home .ratiom-fit-card {
	padding: 32px;
	border: 1px solid var(--r-home-border-dark);
	border-radius: var(--r-home-radius);
	background: #fff;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
}

body.home .ratiom-fit-card.is-not {
	background: #f2f2ec;
}

body.home .ratiom-fit-card h3 {
	margin: 0 0 24px;
	color: var(--r-home-ink);
}

body.home .ratiom-fit-card ul {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.home .ratiom-fit-card li {
	display: flex;
	gap: 12px;
	color: rgba(0, 0, 0, 0.72);
	font-weight: 700;
	line-height: 1.5;
}

body.home .ratiom-fit-card.is-not li::before {
	content: none;
	display: none;
}

body.home .ratiom-pricing-rebuild-inner {
	display: grid;
	grid-template-columns: minmax(240px, 0.75fr) minmax(380px, 1fr) minmax(320px, 0.9fr);
	gap: 48px;
	align-items: start;
}

body.home .ratiom-pricing-main-card {
	min-height: 640px;
	padding: 48px 40px 32px;
	border: 1px solid rgba(196, 238, 24, 0.34);
	border-radius: var(--r-home-radius);
	background: #111;
	box-shadow: 0 28px 88px rgba(0, 0, 0, 0.44);
}

body.home .ratiom-pricing-label {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--r-home-lime);
	color: #000;
	font-size: 0.72rem;
	font-weight: 900;
}

body.home .ratiom-pricing-title {
	color: #fff;
}

body.home .ratiom-pricing-number {
	font-size: var(--type-h2-size);
}

body.home .ratiom-pricing-includes {
	gap: 12px;
	padding: 24px;
	border-radius: var(--r-home-radius);
}

body.home .ratiom-pricing-includes li {
	align-items: flex-start;
	gap: 12px;
}

body.home .ratiom-pricing-note {
	margin: 0;
	color: rgba(255, 255, 255, 0.52);
	font-size: 0.85rem;
	line-height: 1.5;
}

body.home .ratiom-addon-card {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 20px;
	min-height: 144px;
	padding: 24px;
	border-radius: var(--r-home-radius);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.home .ratiom-addon-icon {
	display: grid;
	place-items: center;
	height: 72px;
	border-radius: var(--r-home-radius);
	background: rgba(196, 238, 24, 0.1);
	color: var(--r-home-lime);
}

body.home .ratiom-testimonials-section .section-container {
	display: grid;
	grid-template-columns: minmax(280px, 0.34fr) minmax(0, 0.66fr);
	gap: 64px;
	align-items: start;
}

body.home .ratiom-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}

body.home .ratiom-testimonial-card {
	min-height: 312px;
	padding: 32px;
	border: 1px solid var(--r-home-border-dark);
	border-radius: var(--r-home-radius);
	background: #fff;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* testimonial-text color + font-size overridden in FINAL PRECISION POLISH */

body.home .ratiom-testimonial-avatar {
	width: 52px;
	height: 52px;
	background: #000;
	color: var(--r-home-lime);
}

body.home .ratiom-faq-local .ratiom-section-header {
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

body.home .ratiom-faq-local .ratiom-section-header h2 {
	margin-top: 16px;
	color: #fff;
}

body.home .ratiom-faq-list {
	max-width: 900px;
	margin-top: 48px;
}

body.home .ratiom-faq-item {
	margin-bottom: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--r-home-radius);
	background: rgba(255, 255, 255, 0.035);
	overflow: hidden;
}

body.home .ratiom-faq-item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.home .ratiom-faq-question {
	min-height: 72px;
	padding: 22px 24px;
}

body.home .ratiom-faq-answer {
	padding: 0 24px 24px;
}

body.home .ratiom-faq-answer p {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
}

body.home .ratiom-final-cta-section {
	background: var(--r-home-lime);
}

body.home .ratiom-final-cta-box {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	gap: 28px 32px;
	align-items: center;
	padding: 36px 48px;
	border-radius: var(--r-home-radius);
	background: var(--r-home-lime);
	color: #000;
	text-align: left;
}

body.home .ratiom-final-cta-icon {
	width: 72px;
	height: 72px;
	border-radius: var(--r-home-radius);
}

body.home .ratiom-final-cta-headline,
body.home .ratiom-final-cta-subheadline {
	max-width: 640px;
	text-align: left;
}

body.home .ratiom-final-cta-headline {
	font-size: var(--type-h2-size);
}

body.home .ratiom-final-cta-btn {
	justify-content: center;
	background: #000;
	color: var(--r-home-lime);
	white-space: nowrap;
}

body.home .ratiom-final-cta-trust {
	grid-column: 2 / -1;
	justify-content: flex-start;
	margin: -4px 0 0;
	color: rgba(0, 0, 0, 0.65);
	font-size: 0.9rem;
	font-weight: 600;
}

body.home .ratiom-final-cta-trust span::before {
	display: none;
}

@media (max-width: 1180px) {
	body.home .ratiom-trust-strip-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	body.home .ratiom-trust-strip-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	body.home .ratiom-founder-local .ratiom-founder-inner,
	body.home .ratiom-fail-inner,
	body.home .ratiom-pricing-rebuild-inner,
	body.home .ratiom-testimonials-section .section-container {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-pricing-main-card,
	body.home .ratiom-pricing-addons {
		max-width: 680px;
	}

	body.home .ratiom-testimonials-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	body.home .section-container {
		padding-inline: var(--r-home-gutter-tablet);
	}

	body.home .ratiom-transformation-header,
	body.home .ratiom-fit-grid,
	body.home .ratiom-final-cta-box {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-transformation-header .ratiom-label {
		grid-column: auto;
		margin-bottom: 0;
	}

	body.home .ratiom-fail-grid,
	body.home .ratiom-process-steps,
	body.home .ratiom-testimonials-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.home .ratiom-final-cta-box,
	body.home .ratiom-final-cta-headline,
	body.home .ratiom-final-cta-subheadline {
		text-align: center;
	}

	body.home .ratiom-final-cta-trust {
		grid-column: auto;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	body.home .section-container {
		padding-inline: var(--r-home-gutter-mobile);
	}

	body.home .ratiom-trust-strip-grid,
	body.home .ratiom-fail-grid,
	body.home .ratiom-process-steps,
	body.home .ratiom-included-grid,
	body.home .ratiom-founder-trust-badges,
	body.home .ratiom-testimonials-grid {
		grid-template-columns: 1fr;
	}

	body.home .ratiom-trust-strip-grid {
		border-inline: 0;
	}

	body.home .ratiom-trust-strip-item {
		justify-content: flex-start;
		border-right: 0;
	}

	body.home .ratiom-founder-local .ratiom-founder-inner,
	body.home .ratiom-pricing-main-card,
	body.home .ratiom-fit-card,
	body.home .ratiom-testimonial-card {
		padding: 24px;
	}

	body.home .ratiom-founder-local .ratiom-founder-avatar {
		width: min(100%, 240px);
		height: auto;
		aspect-ratio: 1;
	}

	body.home .ratiom-addon-card {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 16px;
	}

	body.home .ratiom-addon-icon {
		height: 56px;
	}

	body.home .ratiom-final-cta-box {
		padding: 32px 20px;
	}

	body.home .ratiom-final-cta-btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Section headline consistency: global type system
   --------------------------------------------------------------------------- */

.ratiom-section-header h2,
body.home .ratiom-section-header h2,
body.home .ratiom-section-headline,
body.home .ratiom-transformation-headline,
body.home .ratiom-founder-bio h2,
body.home .ratiom-fail-copy h2,
body.home .ratiom-included-heading h2,
body.home .ratiom-who h2 {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

/* =============================================================================
   POLISH PASS — items 3–7
   ============================================================================= */

/* ---------------------------------------------------------------------------
   3. Testimonials — centered heading + stat-first cards
   --------------------------------------------------------------------------- */

/* Override split 2-col grid → single column so heading spans full width */
body.home .ratiom-testimonials-section .section-container {
	display: block;
}

body.home .ratiom-testimonials-heading {
	text-align: center;
	max-width: none;
	margin-bottom: 48px;
}

body.home .ratiom-testimonials-heading .ratiom-section-headline {
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
}

body.home .ratiom-testimonials-subheadline {
	font-size: var(--type-body-size);
	color: rgba(0, 0, 0, 0.6);
	line-height: var(--type-body-lh);
	margin: 12px auto 0;
	max-width: 480px;
}

/* Grid was already 3-col; now sits below the centered heading */
body.home .ratiom-testimonials-grid {
	margin-top: 0;
}

/* Card: tighten shadow/border per spec */
body.home .ratiom-testimonial-card {
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* RESULT STAT — largest element, eye-catcher */
body.home .ratiom-testimonial-stat {
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	color: #c4ee18;
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

body.home .ratiom-testimonial-stat-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(0, 0, 0, 0.5);
	margin-top: 4px;
}

body.home .ratiom-testimonial-divider {
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin: 16px 0;
}

body.home .ratiom-testimonial-text {
	font-size: var(--type-small-size);
	line-height: var(--type-small-lh);
	color: rgba(0, 0, 0, 0.75);
	font-weight: 400;
	margin: 0;
}

body.home .ratiom-testimonial-avatar {
	width: 40px;
	height: 40px;
	font-size: 0.875rem;
}

body.home .ratiom-testimonial-name {
	font-size: 13px;
	font-weight: 700;
}

body.home .ratiom-testimonial-title {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.5);
}

/* Mobile: single column */
@media (max-width: 640px) {
	body.home .ratiom-testimonials-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   4. Section separation — simple-process / whats-included
   --------------------------------------------------------------------------- */

body.home .ratiom-simple-process {
	background: #f8f8f5;
}

body.home .ratiom-included-local {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ---------------------------------------------------------------------------
   5. Trustworthy section — premium 2×3 card redesign
   --------------------------------------------------------------------------- */

body.home .ratiom-trustworthy {
	background: #000;
}

body.home .ratiom-trustworthy-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
	gap: 80px;
	align-items: start;
}

body.home .ratiom-trustworthy-copy h2 {
	margin: 20px 0 0;
	color: #fff;
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
}

body.home .ratiom-trustworthy-copy p {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
}

body.home .ratiom-trustworthy-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body.home .ratiom-trustworthy-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	background: #0f0f0f;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 18px;
	min-height: 96px;
	transition: background 0.2s ease, border-color 0.25s ease, transform 0.2s ease;
}

body.home .ratiom-trustworthy-card:hover {
	background: #161616;
	border-color: rgba(196, 238, 24, 0.22);
	transform: translateY(-2px);
}

body.home .ratiom-tw-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	min-width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(196, 238, 24, 0.1);
	border: 1px solid rgba(196, 238, 24, 0.28);
	margin-top: 1px;
}


body.home .ratiom-tw-text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

body.home .ratiom-tw-text strong {
	display: block;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

body.home .ratiom-tw-text span {
	display: block;
	color: rgba(255, 255, 255, 0.52);
	font-size: 0.8125rem;
	line-height: 1.55;
	font-weight: 400;
}

@media (max-width: 1024px) {
	body.home .ratiom-trustworthy-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

@media (max-width: 640px) {
	body.home .ratiom-trustworthy-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	body.home .ratiom-trustworthy-card {
		min-height: auto;
		padding: 16px;
	}
}

/* ---------------------------------------------------------------------------
   6. FAQ — flat-list accordion, 720px, tighter typography
   --------------------------------------------------------------------------- */

body.home .ratiom-faq-list {
	max-width: 720px;
	margin-top: 48px;
}

/* Revert card style to flat divider list */
body.home .ratiom-faq-item {
	margin-bottom: 0;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

body.home .ratiom-faq-item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.home .ratiom-faq-question {
	min-height: 48px;
	padding: 20px 0;
}

body.home .ratiom-faq-question span {
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
}

body.home .ratiom-faq-chevron {
	color: #c4ee18;
}

body.home .ratiom-faq-answer {
	padding: 12px 0 8px;
}

body.home .ratiom-faq-answer p {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------------------
   7. Industries strip — Option B: subtle divider (reduced footprint)
   --------------------------------------------------------------------------- */

/* =============================================================================
   FINAL PRECISION POLISH — 2026-05-27
   Fixes 1–9: hero H1 spans, process section, feature grid, testimonials dark,
   pricing overflow, FAQ, footer, micro-polish (accent, buttons, labels, scroll)
   ============================================================================= */

/* --- Fix 1: h1-line utility class ------------------------------------ */
/* --- Fix 3: Simple Process section ----------------------------------- */
body.home .ratiom-simple-process .ratiom-section-headline {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	letter-spacing: var(--type-h2-ls);
}

body.home .ratiom-process-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: 160px;
	padding: 24px;
}

/* Process step icon — lime container with visible line icon above heading */
body.home .ratiom-process-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(196, 238, 24, 0.18);
	border: 1px solid rgba(196, 238, 24, 0.40);
	color: #c4ee18;
	flex-shrink: 0;
}

/* Number badge → 48×48 lime ring, floated to top via flex order */
body.home .ratiom-process-number {
	order: -1;
	width: 48px;
	height: 48px;
	margin: 0 auto;
	flex-shrink: 0;
	border: 2px solid #c4ee18;
	border-radius: 50%;
	background: transparent;
	color: #c4ee18;
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

body.home .ratiom-process-title {
	font-size: var(--type-small-size);
	font-weight: 900;
	margin-top: 12px;
	color: #050505;
}

body.home .ratiom-process-description {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	opacity: 0.65;
	margin-top: 6px;
	max-width: 200px;
}

/* Dashed connector aligned to icon vertical center (24px card padding + 22px half-icon) */
body.home .ratiom-process-steps::before {
	top: 46px;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

body.home .ratiom-process-steps {
	gap: 32px;
}

/* --- Fix 4: Feature grid (whats-included-local) ---------------------- */
body.home .ratiom-included-grid {
	grid-auto-rows: 1fr;
}

body.home .ratiom-included-card {
	padding: 20px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* lime accent icon */
body.home .ratiom-included-icon {
	width: var(--ratiom-icon-size);
	height: var(--ratiom-icon-size);
	min-width: var(--ratiom-icon-size);
	min-height: var(--ratiom-icon-size);
	color: #c4ee18;
	background: none;
	border-radius: 0;
	border: none;
	margin-bottom: 12px;
	display: block;
}

body.home .ratiom-included-card h3 {
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	margin-top: 0;
}

body.home .ratiom-included-card p {
	font-size: var(--type-small-size);
	line-height: var(--type-small-lh);
	opacity: 0.6;
	margin-top: 6px;
}

/* --- Fix 5: Testimonials — dark background --------------------------- */
body.home .ratiom-testimonials-section {
	background: #0d0d0d;
	color: #fff;
}

/* Heading on dark bg */
body.home .ratiom-testimonials-section .ratiom-section-headline,
body.home .ratiom-testimonials-heading .ratiom-section-headline {
	color: #fff;
	font-size: var(--type-h2-size);
}

body.home .ratiom-testimonials-subheadline {
	color: rgba(255, 255, 255, 0.6);
}

/* Label pill on dark bg */
body.home .ratiom-testimonials-section .ratiom-label {
	color: #c4ee18;
	border-color: rgba(196, 238, 24, 0.3);
	background: rgba(196, 238, 24, 0.1);
}

/* Accent word on dark */
body.home .ratiom-testimonials-section .ratiom-accent {
	color: #c4ee18;
}

body.home .ratiom-testimonial-card {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 32px;
	box-shadow: none;
}

body.home .ratiom-testimonial-stat {
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	color: #c4ee18;
}

body.home .ratiom-testimonial-stat-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.45);
	margin-top: 4px;
}

body.home .ratiom-testimonial-divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin: 20px 0;
}

body.home .ratiom-testimonial-text {
	font-size: var(--type-small-size);
	line-height: var(--type-small-lh);
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
	margin: 0;
}

body.home .ratiom-testimonial-author {
	margin-top: 16px;
}

body.home .ratiom-testimonial-avatar {
	background: rgba(196, 238, 24, 0.2);
	color: #c4ee18;
}

body.home .ratiom-testimonial-name {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

body.home .ratiom-testimonial-title {
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
}

/* --- Fix 6: Pricing — fix overflow clipping heading ------------------ */
body.home .ratiom-pricing-rebuild {
	overflow: visible;
}

body.home .ratiom-pricing-rebuild-copy {
	min-width: 240px;
	overflow: visible;
}

body.home .ratiom-pricing-rebuild .ratiom-section-headline {
	font-size: var(--type-h2-size);
	overflow: visible;
}

/* --- Fix 7: FAQ ------------------------------------------------------- */
body.home .ratiom-faq-list {
	max-width: 680px;
	margin-inline: auto;
	margin-top: 48px;
}

body.home .ratiom-faq-question span {
	font-size: var(--type-h3-size);
	font-weight: var(--type-h3-weight);
	max-width: 90%;
}

body.home .ratiom-faq-chevron {
	flex-shrink: 0;
	margin-left: 16px;
	margin-top: 2px;
	color: #c4ee18;
}

/* Open state: rotate 90deg (→) instead of 180deg (↑) */
body.home .ratiom-faq-item[open] .ratiom-faq-chevron {
	transform: rotate(90deg);
}

body.home .ratiom-faq-answer {
	padding: 12px 0 4px;
}

body.home .ratiom-faq-answer p {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	color: rgba(255, 255, 255, 0.6);
}

/* --- Fix 9a: Accent normalisation (dark sections) -------------------- */
body.home .ratiom-transformation-section .ratiom-accent,
body.home .ratiom-pricing-rebuild .ratiom-accent {
	color: #c4ee18;
}

/* --- Fix 9b: Button border-radius — standardise to 8px --------------- */
body.home .ratiom-btn-primary,
body.home .ratiom-btn-secondary,
body.home .ratiom-final-cta-btn,
body.home .ratiom-pricing-cta {
	border-radius: 8px;
}

/* Labels on light backgrounds */
body.home .ratiom-simple-process .ratiom-label,
body.home .ratiom-industries .ratiom-label {
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.6);
}

/* Labels on dark backgrounds */
body.home .ratiom-included-local .ratiom-label {
	border: 1px solid rgba(196, 238, 24, 0.25);
	background: rgba(196, 238, 24, 0.07);
	color: #c4ee18;
}

/* --- Fix 9e: Scroll-margin for all navbar anchor targets ------------- */
#hero,
#how-it-works,
#included,
#testimonials,
#pricing,
#faq {
	scroll-margin-top: 80px;
}

/* --- Responsive: testimonials 1-col ---------------------------------- */
@media (max-width: 640px) {
	body.home .ratiom-testimonials-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Pricing checkmarks ── */
body.home .ratiom-pricing-bullets li span {
	width: auto;
	height: auto;
	min-width: unset;
	border-radius: 0;
	background: none;
	box-shadow: none;
	flex: 0 0 auto;
}


/* ===========================================================================
   SITE FOOTER — 4-column agency layout with centered bottom brand
   All rules scoped under .site-footer to prevent override conflicts.
   =========================================================================== */

.site-footer {
	background: #0d0d0d;
	border-top: 2px solid var(--ratiom-primary);
	padding-top: 72px;
	width: 100%;
	margin-top: auto;
}

.site-footer .footer-inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-gutter) 72px;
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr 1fr !important;
	gap: 32px !important;
	align-items: start;
}

.site-footer .footer-heading {
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);
	margin: 0 0 20px;
	padding: 0;
}

.site-footer .footer-links {
	list-style: none !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.site-footer .footer-links li {
	display: block !important;
	margin-bottom: 14px !important;
}

.site-footer .footer-links a {
	display: block !important;
	text-align: left !important;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color 0.15s;
	line-height: 1.4;
}

.site-footer .footer-links a:hover {
	color: var(--ratiom-primary);
}

.site-footer .footer-links--contact .footer-cta-link {
	color: var(--ratiom-primary);
	font-weight: 600;
	font-size: 15px;
}

.site-footer .footer-links--contact .footer-cta-link:hover {
	color: #ffffff;
}

.site-footer .footer-links--contact .footer-email {
	color: rgba(255, 255, 255, 0.4);
	font-size: 13px;
}

/* Bottom brand area — centered logo + social */
.site-footer .footer-bottom-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 40px var(--container-gutter);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.site-footer .footer-bottom-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.site-footer .footer-bottom-logo img {
	height: 28px;
	width: auto;
	opacity: 0.8;
	transition: opacity 0.15s;
}

.site-footer .footer-bottom-logo:hover img {
	opacity: 1;
}

.site-footer .footer-bottom-social {
	display: flex;
	gap: 20px;
	align-items: center;
}

.site-footer .footer-bottom-social a {
	color: rgba(255, 255, 255, 0.35);
	transition: color 0.15s;
	text-decoration: none;
	display: flex;
	align-items: center;
}

.site-footer .footer-bottom-social a:hover {
	color: var(--ratiom-primary);
}

/* Copyright row */
.site-footer .footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.site-footer .footer-bottom-inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 16px var(--container-gutter);
	display: flex !important;
	justify-content: space-between !important;
	align-items: center;
	gap: 12px;
}

.site-footer .footer-copy {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.2);
}

/* Legal links — subtle inline row in the copyright bar */
.site-footer .footer-legal {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.site-footer .footer-legal a {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.3);
	text-decoration: none;
	transition: color 0.15s;
}

.site-footer .footer-legal a:hover {
	color: rgba(255, 255, 255, 0.65);
}

.site-footer .footer-legal span {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.15);
	line-height: 1;
}

@media (max-width: 900px) {
	.site-footer .footer-inner {
		grid-template-columns: 1fr 1fr !important;
		gap: 40px 32px !important;
	}
}

@media (max-width: 540px) {
	.site-footer {
		padding-top: 56px;
	}

	.site-footer .footer-inner {
		grid-template-columns: 1fr !important;
		padding: 0 var(--container-gutter) 48px;
		gap: 36px !important;
	}

	.site-footer .footer-bottom-brand {
		padding: 32px var(--container-gutter);
	}

	.site-footer .footer-bottom-inner {
		padding: 16px var(--container-gutter);
		text-align: center;
		flex-direction: column !important;
		gap: 8px;
	}

	.site-footer .footer-legal {
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
   Video Section (replaces testimonials-section card grid)
   --------------------------------------------------------------------------- */

.ratiom-videos-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 48px;
}

@media (min-width: 640px) {
	.ratiom-videos-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
	}
}

@media (min-width: 1024px) {
	.ratiom-videos-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

.ratiom-video-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-radius: var(--ratiom-radius-lg);
	overflow: hidden;
	background: var(--ratiom-card);
	border: 1px solid var(--ratiom-primary-border);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.ratiom-video-card:hover {
	transform: translateY(-5px);
	border-color: rgba(196, 238, 24, 0.55);
	box-shadow: 0 16px 48px rgba(196, 238, 24, 0.14), 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* 16:9 aspect-ratio embed container */
.ratiom-video-embed-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #050505;
}

/* Actual iframe (swap in when ready) */
.ratiom-video-embed-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Placeholder shown until a real embed is added */
.ratiom-video-thumb-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(135deg, rgba(196, 238, 24, 0.06) 0%, rgba(255, 255, 255, 0.01) 100%),
		repeating-linear-gradient(rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 32px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 32px),
		#050505;
	transition: background 0.28s ease;
}

.ratiom-video-card:hover .ratiom-video-thumb-placeholder {
	background:
		linear-gradient(135deg, rgba(196, 238, 24, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%),
		#070a00;
}

.ratiom-video-play-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--ratiom-primary);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 4px; /* optical offset for play triangle */
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow: 0 4px 20px rgba(196, 238, 24, 0.3);
}

.ratiom-video-card:hover .ratiom-video-play-btn {
	transform: scale(1.1);
	box-shadow: 0 8px 32px rgba(196, 238, 24, 0.5);
}

/* Caption strip below the embed */
.ratiom-video-caption {
	padding: 16px 20px 18px;
	border-top: 1px solid rgba(196, 238, 24, 0.1);
}

.ratiom-video-title {
	display: block;
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 900;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.4;
	margin: 0;
	transition: color 0.2s ease;
}

.ratiom-video-card:hover .ratiom-video-title {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Single Video Section — replaces multi-card grid layout
   Cinematic, centered, premium. Bridges trust into pricing.
   --------------------------------------------------------------------------- */

/* Section background: dark with subtle lime radial warmth */
body.home .ratiom-testimonials-section {
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, rgba(196, 238, 24, 0.055) 0%, transparent 70%),
		#060606;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	color: #fff;
}

/* Centered header: label → headline → sub */
.ratiom-video-section-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	margin-bottom: 48px;
}

.ratiom-video-section-headline {
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: var(--type-h2-size);
	font-weight: var(--type-h2-weight);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
	color: #fff;
	margin: 0;
	max-width: 640px;
}

.ratiom-video-section-sub {
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	color: rgba(255, 255, 255, 0.58);
	margin: 0;
	max-width: 540px;
}

/* Video wrapper: centered at 70% of container, min 300px */
.ratiom-single-video-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.ratiom-single-video-inner {
	position: relative;
	width: min(70%, 860px);
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(196, 238, 24, 0.22);
	background: #050505;
	box-shadow:
		0 0 0 1px rgba(196, 238, 24, 0.08),
		0 32px 80px rgba(0, 0, 0, 0.72),
		0 0 60px rgba(196, 238, 24, 0.06);
}

/* Actual iframe — fills the container */
.ratiom-single-video-inner iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* Placeholder grid texture + play button */
.ratiom-single-video-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background:
		linear-gradient(135deg, rgba(196, 238, 24, 0.055) 0%, rgba(255, 255, 255, 0.008) 100%),
		repeating-linear-gradient(rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 40px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 40px),
		#050505;
}

.ratiom-single-video-play {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--ratiom-primary);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 5px;
	box-shadow: 0 0 0 12px rgba(196, 238, 24, 0.1), 0 8px 32px rgba(196, 238, 24, 0.35);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ratiom-single-video-placeholder:hover .ratiom-single-video-play {
	transform: scale(1.08);
	box-shadow: 0 0 0 16px rgba(196, 238, 24, 0.12), 0 12px 40px rgba(196, 238, 24, 0.5);
}

.ratiom-single-video-label {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.25);
	margin: 0;
}

/* Tablet: widen to 88% */
@media (max-width: 1023px) {
	.ratiom-single-video-inner {
		width: min(88%, 720px);
	}
}

/* Mobile: full container width */
@media (max-width: 640px) {
	.ratiom-single-video-inner {
		width: 100%;
		border-radius: 10px;
	}

	.ratiom-video-section-header {
		margin-bottom: 32px;
	}

	.ratiom-single-video-play {
		width: 64px;
		height: 64px;
	}
}

/* =========================================================================
   42. Premium All-Dark Brand — Final Authority Pass
   Converts all cream/light homepage sections to full-dark.
   Centers final CTA, corrects label colors on dark backgrounds, removes white card shells.
   ========================================================================= */

/* ── Section padding: 80px desktop, 64px tablet, 48px mobile ── */
body.home .ratiom-section:not(.ratiom-hero-rebuild),
body.home .ratiom-industries,
body.home .ratiom-transformation-section,
body.home .ratiom-founder-local,
body.home .ratiom-fail-local,
body.home .ratiom-trustworthy,
body.home .ratiom-simple-process,
body.home .ratiom-included-local,
body.home .ratiom-who,
body.home .ratiom-pricing-rebuild,
body.home .ratiom-testimonials-section,
body.home .ratiom-faq-local {
	padding-block: 80px;
}

/* ── Industries: compact icon strip → headline → copy ── */
body.home .ratiom-industries {
	background: #060606;
	color: #fff;
	padding-block: 40px 56px;
}

body.home .ratiom-industries .ratiom-section-headline {
	margin: 0 auto 20px;
	color: #fff;
	text-align: center;
	max-width: 900px;
}

body.home .ratiom-industries-grid {
	gap: 12px;
	margin-block: 0 24px;
}

body.home .ratiom-industries-supporting-text {
	color: rgba(255, 255, 255, 0.52);
}

body.home .ratiom-industries-microcopy {
	color: rgba(255, 255, 255, 0.35);
	margin-top: 12px;
}

/* Industry cards: compact category chips, no card shell */
body.home .ratiom-industry-card {
	min-height: auto;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	gap: 8px;
	transition: none;
}

body.home .ratiom-industry-card:hover {
	transform: none;
	border-color: transparent;
	box-shadow: none;
	background: transparent;
}

body.home .ratiom-industry-icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: rgba(196, 238, 24, 0.07);
	border: 1px solid rgba(196, 238, 24, 0.12);
	color: #c4ee18;
	transition: background 0.2s ease, border-color 0.2s ease;
}

body.home .ratiom-industry-card:hover .ratiom-industry-icon {
	background: rgba(196, 238, 24, 0.13);
	border-color: rgba(196, 238, 24, 0.24);
}

body.home .ratiom-industry-card h3 {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--type-small-size);
	font-weight: var(--type-h3-weight);
}

/* ── Labels on dark backgrounds: lime, not dark olive ── */
body.home .ratiom-industries .ratiom-label,
body.home .ratiom-fail-local .ratiom-label,
body.home .ratiom-simple-process .ratiom-label,
body.home .ratiom-who .ratiom-label {
	color: #c4ee18;
	border-color: rgba(196, 238, 24, 0.25);
	background: rgba(196, 238, 24, 0.07);
}

/* ── Fail section: dark; slightly tighter after trust bar ── */
body.home .ratiom-fail-local {
	background: #000;
	color: #fff;
	padding-block: 66px;
}

body.home .ratiom-fail-copy h2 {
	color: #fff;
}

body.home .ratiom-fail-copy p {
	color: rgba(255, 255, 255, 0.62);
}

body.home .ratiom-fail-card {
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: none;
	min-height: auto;
	transition: border-color 0.2s ease;
}

body.home .ratiom-fail-card:hover {
	transform: none;
	border-color: rgba(196, 238, 24, 0.2);
	box-shadow: none;
	background: #111;
}

body.home .ratiom-fail-card h3 {
	color: #fff;
}

body.home .ratiom-fail-card p {
	color: rgba(255, 255, 255, 0.52);
}

body.home .ratiom-fail-card strong {
	color: #c4ee18;
	margin-top: 12px;
}

/* ── Process section: dark ── */
body.home .ratiom-simple-process {
	background: #070707;
	color: #fff;
}

body.home .ratiom-simple-process .ratiom-section-headline {
	color: #fff;
}

body.home .ratiom-simple-process .ratiom-accent {
	color: #c4ee18;
}

body.home .ratiom-process-step {
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: none;
	transition: border-color 0.2s ease;
}

body.home .ratiom-process-step:hover {
	border-color: rgba(196, 238, 24, 0.18);
}

/* Lime ring number badge works well on dark — just ensure correct colors */
body.home .ratiom-process-number {
	background: transparent;
	border: 2px solid #c4ee18;
	color: #c4ee18;
}

body.home .ratiom-process-title {
	color: #fff;
	font-size: var(--type-small-size);
}

body.home .ratiom-process-description {
	color: rgba(255, 255, 255, 0.52);
	opacity: 1;
}

/* Dashed connector: light on dark background */
body.home .ratiom-process-steps::before {
	border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Who it's for section: dark ── */
body.home .ratiom-who {
	background: #000;
	color: #fff;
}

body.home .ratiom-who h2,
body.home .ratiom-who .ratiom-section-header h2 {
	color: #fff;
}

body.home .ratiom-fit-card {
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: none;
	transition: border-color 0.2s ease;
}

body.home .ratiom-fit-card.is-good {
	border-color: rgba(196, 238, 24, 0.12);
}

body.home .ratiom-fit-card.is-not {
	background: #0a0a0a;
}

body.home .ratiom-fit-card h3 {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.home .ratiom-fit-card li {
	color: rgba(255, 255, 255, 0.68);
	font-weight: 500;
}

body.home .ratiom-fit-card.is-not li {
	color: rgba(255, 255, 255, 0.38);
}


/* Section headlines on dark sections use global type system */

/* ── Final CTA: centered layout, not left-aligned 3-col grid ── */
body.home .ratiom-final-cta-section {
	padding-block: 80px;
	background: #c4ee18;
}

body.home .ratiom-final-cta-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0;
	background: transparent;
	border-radius: 0;
	max-width: 680px;
	margin-inline: auto;
	gap: 28px;
}

body.home .ratiom-final-cta-copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

body.home .ratiom-final-cta-headline {
	font-size: var(--type-h2-size);
	line-height: var(--type-h2-lh);
	letter-spacing: var(--type-h2-ls);
	text-align: center;
	color: #000;
	max-width: 620px;
}

body.home .ratiom-final-cta-subheadline {
	font-size: var(--type-body-size);
	color: rgba(0, 0, 0, 0.62);
	text-align: center;
	max-width: 520px;
	margin-inline: auto;
}

body.home .ratiom-final-cta-btn {
	border-radius: 9999px;
	background: #000;
	color: #c4ee18;
	padding: 16px 40px;
	min-height: auto;
	font-size: 1rem;
	font-weight: 700;
}

body.home .ratiom-final-cta-btn:hover {
	background: #111;
	color: #c4ee18;
	transform: none;
	box-shadow: none;
}

body.home .ratiom-final-cta-trust {
	grid-column: unset;
	justify-content: center;
	margin: 0;
	color: rgba(0, 0, 0, 0.52);
	font-weight: 500;
	font-size: 0.9rem;
	text-align: center;
}

/* ── Responsive breakpoints ── */
@media (max-width: 900px) {
	body.home .ratiom-section:not(.ratiom-hero-rebuild),
	body.home .ratiom-industries,
	body.home .ratiom-transformation-section,
	body.home .ratiom-founder-local,
	body.home .ratiom-fail-local,
	body.home .ratiom-trustworthy,
	body.home .ratiom-simple-process,
	body.home .ratiom-included-local,
	body.home .ratiom-who,
	body.home .ratiom-pricing-rebuild,
	body.home .ratiom-testimonials-section,
	body.home .ratiom-faq-local,
	body.home .ratiom-final-cta-section {
		padding-block: 64px;
	}
}

@media (max-width: 640px) {
	body.home .ratiom-section:not(.ratiom-hero-rebuild),
	body.home .ratiom-industries,
	body.home .ratiom-transformation-section,
	body.home .ratiom-founder-local,
	body.home .ratiom-fail-local,
	body.home .ratiom-trustworthy,
	body.home .ratiom-simple-process,
	body.home .ratiom-included-local,
	body.home .ratiom-who,
	body.home .ratiom-pricing-rebuild,
	body.home .ratiom-testimonials-section,
	body.home .ratiom-faq-local,
	body.home .ratiom-final-cta-section {
		padding-block: 48px;
	}
}

/* =========================================================================
   HEADER + HERO - Homepage Canonical Layout (2026-06)
   Single source for homepage header spacing, hero sizing, image scale, and pills.
   ========================================================================= */

/* ── Grid: 60% copy / 40% image ── */
body.home {
	--site-header-height:       64px;
	--r-home-container:         var(--hero-container-max);
	--r-home-gutter:            var(--hero-container-gutter);
	--hero-container-max:       1320px;
	--hero-container-gutter:    48px;
	--hero-grid-left:           minmax(0, 1.5fr);
	--hero-grid-right:          minmax(0, 1fr);
	--hero-copy-image-gap:      0px;
	--hero-copy-max:            760px;
	--hero-body-max:            580px;
	--hero-h1-size:             clamp(68px, 5.4vw, 86px);
	--hero-h1-line-height:      0.95;
	--hero-h1-letter-spacing:   -0.045em;
	--hero-founder-width:       clamp(460px, 37vw, 548px);
	--hero-founder-transform:   translateX(16px);
}

body.home .ratiom-nav-wrapper {
	padding: 0;
	background: rgba(0, 0, 0, 0.94);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: none;
}

body.home .ratiom-nav {
	height: var(--site-header-height);
	max-width: var(--hero-container-max);
	margin-inline: auto;
	padding: 0 var(--hero-container-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	position: relative;
}

body.home .ratiom-nav-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

body.home .ratiom-nav-logo img {
	height: 32px;
	width: auto;
	transform: none;
	display: block;
}

body.home .ratiom-nav-links {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.home .ratiom-nav-link {
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	opacity: 1;
}

body.home .ratiom-nav-link:hover {
	background: transparent;
	color: #fff;
}

body.home .ratiom-nav-link.is-current,
body.home .ratiom-nav-link[aria-current='page'] {
	background: transparent;
	color: #c4ee18;
	text-decoration: underline;
	text-decoration-color: #c4ee18;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

body.home .ratiom-nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: #c4ee18;
	color: #000;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	box-shadow: none;
}

body.home .ratiom-nav-cta:hover,
body.home .ratiom-btn-primary.ratiom-nav-cta:hover {
	background: #d4ff28;
	color: #000;
	transform: none;
	box-shadow: none;
}

body.home .ratiom-hero-media-frame {
	display: grid;
	grid-template-columns: var(--hero-grid-left) var(--hero-grid-right);
	gap: 0 var(--hero-copy-image-gap);
	align-items: start;
	width: 100%;
	min-height: 0;
	margin-inline: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

/* Reassurance text */
body.home .ratiom-hero-reassurance {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.34);
	font-family: 'Inter', sans-serif;
	font-size: var(--type-small-size);
	line-height: var(--type-small-lh);
	letter-spacing: 0.01em;
}

/* Trust indicators row */
body.home .ratiom-hero-trust-indicators {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 20px;
	margin: 36px 0 0;
	max-width: none;
}

body.home .ratiom-hero-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.87);
	white-space: nowrap;
}

body.home .trust-check {
	color: #c4ee18;
	font-size: 15px;
	line-height: 1;
	flex-shrink: 0;
}

/* Primary CTA */
body.home .ratiom-hero-rebuild-actions .ratiom-btn-primary {
	background: #c4ee18;
	color: #000;
	box-shadow: 0 0 24px rgba(196, 238, 24, 0.30);
}

body.home .ratiom-hero-rebuild-actions .ratiom-btn-primary:hover {
	background: #d4ff28;
	color: #000;
	box-shadow: 0 0 34px rgba(196, 238, 24, 0.42);
	transform: none;
}

/* Secondary CTA */
body.home .ratiom-hero-rebuild-actions .ratiom-btn-secondary {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.78);
	box-shadow: none;
}

body.home .ratiom-hero-rebuild-actions .ratiom-btn-secondary:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.26);
	color: rgba(255, 255, 255, 0.9);
	transform: none;
}

/* Founder image */
body.home .ratiom-hero-founder-image {
	position: relative;
	z-index: 1;
	width: var(--hero-founder-width);
	max-width: 100%;
	height: auto;
	margin: 0;
	object-fit: contain;
	object-position: bottom center;
	transform: var(--hero-founder-transform);
	transform-origin: bottom center;
}

body.home .ratiom-hero-founder-col {
	order: 2;
	grid-column: 2 / 3;
	grid-row: 1;
	align-self: stretch;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 100%;
	min-width: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
}

body.home .ratiom-hero-rebuild-headline {
	max-width: 820px;
	margin: 0 0 24px;
	color: #fff;
	font-family: 'Darker Grotesque', system-ui, sans-serif;
	font-size: var(--hero-h1-size);
	font-weight: 900;
	line-height: var(--hero-h1-line-height);
	letter-spacing: var(--hero-h1-letter-spacing);
	white-space: nowrap;
}

body.home .hero-line-1,
body.home .hero-line-2,
body.home .hero-line-3 {
	display: block;
}

body.home .hero-title-line-2 {
	display: block;
	white-space: nowrap;
}

body.home .ratiom-hero-rebuild-subheadline {
	max-width: var(--hero-body-max);
	margin: 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--type-body-size);
	line-height: var(--type-body-lh);
	letter-spacing: var(--type-body-ls);
}

body.home .ratiom-hero-rebuild-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 32px 0 24px;
}

body.home .ratiom-hero-rebuild-actions .ratiom-btn-primary,
body.home .ratiom-hero-rebuild-actions .ratiom-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: var(--type-btn-size);
	font-weight: var(--type-btn-weight);
	letter-spacing: 0;
	white-space: nowrap;
	transform: none;
}

/* Section spacing */
body.home .ratiom-hero-rebuild {
	display: block;
	position: relative;
	min-height: auto;
	padding-block: 48px 0;
	background:
		radial-gradient(circle at 62% 38%, rgba(196, 238, 24, 0.16), transparent 34%),
		radial-gradient(circle at 78% 68%, rgba(196, 238, 24, 0.08), transparent 28%),
		#000;
	overflow: hidden;
}

body.home .ratiom-hero-rebuild .section-container {
	width: 100%;
	max-width: var(--hero-container-max);
	margin-inline: auto;
	padding-inline: var(--hero-container-gutter);
}

body.home .ratiom-hero-media-copy {
	order: 1;
	grid-column: 1 / 2;
	grid-row: 1;
	align-self: start;
	max-width: var(--hero-copy-max);
	min-width: 0;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 2;
}

body.home .ratiom-hero-media-copy .ratiom-label {
	display: inline-flex;
	margin: 0 0 24px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid rgba(196, 238, 24, 0.22);
	background: rgba(196, 238, 24, 0.08);
	color: #c4ee18;
	font-family: 'Inter', sans-serif;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Responsive hero rules */
@media (max-width: 1024px) {
	body.home .ratiom-nav {
		padding-inline: var(--hero-container-gutter);
		gap: 12px;
	}

	body.home .ratiom-nav-toggle {
		display: flex;
		order: -1;
	}

	body.home .ratiom-nav-logo {
		flex: 1;
		justify-content: center;
	}

	body.home .ratiom-nav-links {
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		left: var(--hero-container-gutter);
		right: var(--hero-container-gutter);
		transform: none;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 14px;
		background: #050505;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
	}

	body.home .ratiom-nav-links.is-open {
		display: flex;
	}

	body.home .ratiom-nav-link {
		padding: 12px;
		border-radius: 6px;
	}
}

@media (min-width: 1200px) and (max-width: 1439px) {
	body.home {
		--hero-container-max:       1180px;
		--hero-container-gutter:    36px;
		--hero-grid-left:           minmax(0, 1.5fr);
		--hero-grid-right:          minmax(0, 1fr);
		--hero-copy-image-gap:      0px;
		--hero-copy-max:            700px;
		--hero-body-max:            560px;
		--hero-h1-size:             clamp(64px, 5.4vw, 80px);
		--hero-founder-width:       clamp(440px, 36vw, 510px);
		--hero-founder-transform:   translateX(12px);
	}
}

@media (max-width: 1199px) {
	body.home {
		--site-header-height:       60px;
		--hero-container-gutter:    36px;
		--hero-copy-max:            680px;
		--hero-body-max:            560px;
		--hero-h1-size:             clamp(58px, 7vw, 70px);
		--hero-founder-width:       min(80vw, 520px);
		--hero-founder-transform:   none;
	}

	body.home .ratiom-hero-rebuild-headline {
		white-space: normal;
	}

	body.home .hero-line-1,
	body.home .hero-line-2,
	body.home .hero-line-3 {
		white-space: normal;
	}

	body.home .ratiom-hero-media-frame {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 36px;
	}

	body.home .ratiom-hero-rebuild {
		padding-block: 30px 0;
	}

	body.home .ratiom-hero-founder-col {
		align-self: center;
		max-width: 520px;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	body.home {
		--site-header-height:       58px;
		--hero-container-gutter:    20px;
		--hero-h1-size:             clamp(46px, 12vw, 58px);
		--hero-founder-width:       min(100%, 420px);
		--hero-founder-transform:   none;
	}

	body.home .ratiom-nav {
		padding-inline: var(--hero-container-gutter);
		gap: 8px;
	}

	body.home .ratiom-nav-logo img {
		height: 30px;
	}

	body.home .ratiom-nav-cta {
		min-height: 40px;
		padding-inline: 14px;
		font-size: 13px;
	}

	/* Mobile hero: founder image hidden, single-column centred layout */
	body.home .ratiom-hero-founder-col {
		display: none;
	}

	body.home .ratiom-hero-media-frame {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	body.home .ratiom-hero-media-copy {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	body.home .ratiom-hero-media-copy .ratiom-label {
		align-self: center;
		justify-content: center;
		margin-bottom: 12px;
	}

	body.home .ratiom-hero-rebuild-headline {
		width: 100%;
		margin-bottom: 16px;
		text-align: center;
	}

	body.home .ratiom-hero-rebuild-subheadline {
		width: 100%;
		max-width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}

	body.home .hero-line-1 {
		display: none;
	}

	body.home .ratiom-hero-rebuild-actions {
		justify-content: center;
		width: 100%;
		margin: 16px 0;
	}

	body.home .ratiom-hero-rebuild {
		padding-block: 40px 36px;
	}

	body.home .ratiom-hero-trust-indicators {
		display: none;
	}

}

@media (max-width: 430px) {
	body.home {
		--hero-h1-size: clamp(44px, 12.6vw, 54px);
	}

	body.home .ratiom-hero-rebuild-actions {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
	}

	body.home .ratiom-hero-rebuild-actions .ratiom-btn-primary,
	body.home .ratiom-hero-rebuild-actions .ratiom-btn-secondary {
		width: 100%;
		max-width: 320px;
		justify-content: center;
		white-space: normal;
	}

}

/* =========================================================================
   PRICING SECTION — Centred, balanced two-column layout (2026-06)
   ========================================================================= */

/* Tighter premium container: centres the whole section */
body.home .ratiom-pricing-rebuild .section-container {
	max-width: 1160px;
}

/* Header: spans full container, aligns with grid left edge */
body.home .ratiom-pricing-rebuild-header {
	margin-bottom: 40px;
}

/* Two-column grid: main card (fixed) | add-ons (flex) */
body.home .ratiom-pricing-rebuild-inner {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

/* Main card: natural height, no min-height forcing */
body.home .ratiom-pricing-main-card {
	min-height: unset;
}

/* Add-ons column: flex stack with consistent gaps */
body.home .ratiom-pricing-addons {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Addon cards: full width, no orphaned sizing */
body.home .ratiom-addon-card {
	width: 100%;
	min-height: unset;
}

/* "Coming soon" badge — replaces price on Ratiom:One */
.ratiom-addon-coming-soon {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid rgba(196, 238, 24, 0.35);
	border-radius: 999px;
	color: #c4ee18;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Tablet: stack into one column */
@media (max-width: 900px) {
	body.home .ratiom-pricing-rebuild-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	body.home .ratiom-addon-card {
		max-width: 560px;
	}
}

/* Mobile: full width, centred cards */
@media (max-width: 640px) {
	body.home .ratiom-pricing-rebuild-inner {
		gap: 32px;
	}

	body.home .ratiom-addon-card {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Founder CTA — note spacer above button
   --------------------------------------------------------------------------- */

body.home .ratiom-founder-note {
	margin: 0 0 32px;
	font-size: var(--type-small-size);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.02em;
	line-height: 1.5;
}

/* =============================================================================
   Recent Website Projects — browser-frame card grid
   ============================================================================= */

.ratiom-projects-section {
	background: #050505;
}

.ratiom-projects-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media (min-width: 640px) {
	.ratiom-projects-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.ratiom-projects-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ratiom-project-card {
	display: flex;
	flex-direction: column;
}

.ratiom-browser-frame {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #111;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ratiom-project-card:hover .ratiom-browser-frame {
	transform: translateY(-4px);
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.75);
}

.ratiom-browser-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #1c1c1c;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	flex-shrink: 0;
}

.ratiom-browser-dots {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-shrink: 0;
}

.ratiom-browser-dots span {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.ratiom-browser-dots span:nth-child(1) { background: #ff5f57; }
.ratiom-browser-dots span:nth-child(2) { background: #febc2e; }
.ratiom-browser-dots span:nth-child(3) { background: #28c840; }

.ratiom-browser-url {
	flex: 1;
	padding: 4px 10px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.25);
	font-size: 0.7rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.ratiom-browser-screen {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	position: relative; /* establishes containing block for abs-pos img */
}

.ratiom-browser-screen img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	max-width: none;
}

/* ---------------------------------------------------------------------------
   Mobile Usability — 320px–374px (smallest common viewports)
   No desktop layout changes. Only mobile/tablet breakpoints.
   --------------------------------------------------------------------------- */

@media (max-width: 374px) {
	:root {
		--container-gutter: 12px;
	}

	body.home {
		--r-home-gutter-mobile: 12px;
	}

	/* Announcement banner — allow multi-line on tiny screens */
	.ratiom-announcement-text {
		font-size: 0.75rem;
	}

	/* Hero actions — stack buttons vertically on 320px */
	.ratiom-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ratiom-hero-actions .ratiom-btn-primary,
	.ratiom-hero-actions .ratiom-btn-secondary {
		width: 100%;
		justify-content: center;
	}

	/* Card padding tighter */
	.ratiom-card {
		padding: 16px;
	}

	/* Industries grid — single column on 320px */
	.ratiom-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Blog/post card body tighter */
	.ratiom-post-card-body {
		padding: 16px;
	}

	/* FAQ question font smaller */
	.ratiom-faq-question span {
		font-size: 1.25rem;
	}

	/* Pricing card padding tighter */
	.ratiom-pricing-card--new {
		padding: 20px 16px;
	}

	/* Section header spacing */
	.ratiom-section-header {
		margin-bottom: 20px;
	}

}

.ratiom-project-label {
	margin: 14px 0 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
	letter-spacing: 0.01em;
}

/* =============================================================================
   MOBILE ALIGNMENT SYSTEM
   Scope: mobile breakpoints only. Desktop rules are completely untouched.
   Breakpoints mirror the existing responsive layers in this file.
   ============================================================================= */

/* ── Home hero: center all primary copy and CTAs ─────────────────────────── */
@media (max-width: 767px) {
	body.home .ratiom-hero-media-copy .ratiom-label {
		align-self: center;
		justify-content: center;
	}

	body.home .ratiom-hero-rebuild-headline,
	body.home .ratiom-hero-rebuild-subheadline {
		text-align: center;
	}

	body.home .ratiom-hero-rebuild-actions {
		justify-content: center;
	}
}

/* ── Trust strip: center each item (overrides the flex-start set at ≤640px) */
@media (max-width: 640px) {
	body.home .ratiom-trust-strip-item {
		justify-content: center;
	}
}

/* ── Footer: center all content when layout collapses to single column ────── */
@media (max-width: 540px) {
	.site-footer .footer-heading {
		text-align: center;
	}

	.site-footer .footer-links li {
		text-align: center;
	}

	.site-footer .footer-links a {
		text-align: center !important;
	}
}

/* ── Hero bullet points and inline trust bar: hidden on desktop, shown on mobile ── */
.ratiom-hero-bullets,
.ratiom-hero-trust-bar {
	display: none;
}

@media (max-width: 767px) {
	/* Bullet points */
	body.home .ratiom-hero-bullets {
		display: flex;
		flex-direction: column;
		list-style: none;
		margin: 0 0 20px;
		padding: 0;
		gap: 10px;
		width: 100%;
		align-items: center;
	}

	body.home .ratiom-hero-bullets li {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 8px;
		color: rgba(255, 255, 255, 0.78);
		font-size: 0.9375rem;
		font-family: 'Inter', sans-serif;
		line-height: 1.5;
		text-align: center;
	}

	body.home .hero-bullet-check {
		color: #c4ee18;
		font-weight: 700;
		flex-shrink: 0;
		line-height: 1.5;
		font-family: 'Inter', sans-serif;
		font-size: 1rem;
	}

	/* Inline hero trust bar */
	body.home .ratiom-hero-trust-bar {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 8px 16px;
		padding-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		width: 100%;
		margin-top: 4px;
	}

	body.home .ratiom-hero-trust-bar-item {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: rgba(255, 255, 255, 0.48);
		font-family: 'Inter', sans-serif;
		font-size: 0.8rem;
		font-weight: 500;
		white-space: nowrap;
		line-height: 1;
	}

	body.home .ratiom-hero-trust-bar-dot {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #c4ee18;
		flex-shrink: 0;
		display: inline-block;
	}
}

/* ── Mobile: eyebrow pill and label text centering (≤ 767px, all pages) ── */
@media (max-width: 767px) {
	.ratiom-label {
		text-align: center;
		justify-content: center;
	}
	.ratiom-archive-hero-eyebrow {
		text-align: center;
	}
}

/* ── Industries section: left-align headline + copy on mobile only (≤ 480px) ── */
@media (max-width: 480px) {
	body.home .ratiom-industries .ratiom-section-headline {
		text-align: left;
		margin-left: 0;
		margin-right: 0;
		max-width: none;
	}
	body.home .ratiom-industries-supporting-text {
		text-align: left;
		margin-inline: 0;
		max-width: none;
	}
	body.home .ratiom-industries-microcopy {
		text-align: left;
	}
}

/* ============================================================
   Mobile-only headline variants
   Desktop text is wrapped in .ratiom-dsk-hl (always visible on desktop).
   Short mobile rewrites are in .ratiom-mob-hl (hidden on desktop).
   ============================================================ */
.ratiom-mob-hl { display: none; }
@media (max-width: 767px) {
	.ratiom-dsk-hl { display: none; }
	.ratiom-mob-hl { display: inline; }
}

/* ============================================================
   Founder section entity links
   ============================================================ */
.ratiom-founder-entity-links {
	font-size: 13px;
	color: rgba(255,255,255,0.45);
	margin: 0 0 20px;
	font-family: 'Inter', sans-serif;
}

.ratiom-founder-entity-links a {
	color: rgba(255,255,255,0.65);
	text-decoration: none;
	transition: color 0.15s;
}

.ratiom-founder-entity-links a:hover {
	color: #c4ee18;
}

/* ============================================================
   Hero entity links — Gary O'Toole / Ratiom Agency / How Ratiom Works
   Shown on homepage hero below trust bar
   ============================================================ */
.ratiom-hero-entity-links {
	display: none;
}

@media (min-width: 768px) {
	.ratiom-hero-entity-links {
		display: block;
		margin-top: 12px;
		font-size: 13px;
		color: rgba(255,255,255,0.4);
		font-family: 'Inter', sans-serif;
		line-height: 1.5;
	}

	.ratiom-hero-entity-links a {
		color: rgba(255,255,255,0.6);
		text-decoration: none;
		transition: color 0.15s;
	}

	.ratiom-hero-entity-links a:hover {
		color: #c4ee18;
	}
}