/* =========================================================
   Rental Kharma — design tokens
   Source of truth: brand system canvas approved 2026-09-28.
   ========================================================= */
:root {
	--rk-red: #A00000;
	--rk-orange: #FC8905;
	--rk-green: #0A431B;
	--rk-teal: #2FD6E0;
	--rk-pink: #DB5B6A;
	--rk-gray: #47474A;
	--rk-off-white: #DDDED8;
	--rk-light-orange: #FCDDB9;
	--rk-light-green: #BAE5C6;
	--rk-pink-soft: #F2D5D7;
	--rk-black: #1A1A1A;
	--rk-white: #FFFFFF;
	--rk-muted: #8A8A8D;

	--rk-font-heading: 'Jost', -apple-system, sans-serif;
	--rk-font-body: 'Inter', -apple-system, sans-serif;

	--rk-container-width: 1180px;
	--rk-radius: 16px;
	--rk-radius-sm: 12px;
	--rk-radius-pill: 999px;
	--rk-gap: 24px;
}

/* =========================================================
   Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--rk-font-body);
	color: var(--rk-gray);
	background: var(--rk-white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
	font-family: var(--rk-font-heading);
	font-weight: 700;
	color: var(--rk-black);
	margin: 0 0 0.5em;
	line-height: 1.15;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
p { line-height: 1.6; }

.rk-container {
	max-width: var(--rk-container-width);
	margin: 0 auto;
	padding: 0 40px;
}
@media (max-width: 640px) {
	.rk-container { padding: 0 30px; }
	/* Cards carry 30px of their own padding, which eats most of a phone
	   screen once the gutter is taken too. */
	.rk-card { padding: 22px; }
	.rk-band { padding: 28px; }
	.rk-split-panel { padding: 24px; }
}

.rk-section {
	/* padding-block, not the shorthand: `56px 0` zeroed the horizontal
	   padding .rk-container sets, and every section carries both classes.
	   Invisible on desktop, where max-width + auto margin make the gutter. */
	padding-block: 56px;
}
.rk-section--tight { padding-block: 32px; }

/* =========================================================
   Buttons
   ========================================================= */
.rk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rk-radius-pill);
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	border: 2px solid transparent;
	white-space: nowrap;
}
.rk-btn--primary {
	background: var(--rk-red);
	color: var(--rk-white);
}
.rk-btn--primary:hover { background: #860000; }
.rk-btn--secondary {
	background: var(--rk-white);
	color: var(--rk-gray);
	border-color: var(--rk-orange);
}
.rk-btn--secondary:hover { background: var(--rk-light-orange); }

.rk-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--rk-radius-pill);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	background: var(--rk-off-white);
}
.rk-chip--positive { background: var(--rk-light-green); color: var(--rk-green); }
.rk-chip--highlight { background: var(--rk-light-orange); color: var(--rk-gray); }

/* =========================================================
   Header
   ========================================================= */
.rk-header {
	border-bottom: 1px solid var(--rk-off-white);
	background: var(--rk-white);
	position: sticky;
	top: 0;
	z-index: 100;
}
.rk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}
.rk-logo { height: 36px; width: auto; }
.rk-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}
.rk-nav__list a {
	font-size: 14px;
	font-weight: 600;
	color: var(--rk-gray);
}
.rk-nav__list a:hover { color: var(--rk-red); }
.rk-nav__toggle {
	display: none;
	background: none;
	border: 1px solid var(--rk-off-white);
	border-radius: var(--rk-radius-sm);
	padding: 8px 14px;
	font-weight: 600;
	font-size: 14px;
}

@media (max-width: 880px) {
	.rk-nav__toggle { display: inline-flex; }
	.rk-nav__menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--rk-white);
		border-bottom: 1px solid var(--rk-off-white);
		padding: 16px 20px;
	}
	.rk-nav__menu.is-open { display: block; }
	.rk-nav__list { flex-direction: column; align-items: flex-start; gap: 16px; }
	#rk-header-cta { display: none; }
}

/* =========================================================
   Footer
   ========================================================= */
.rk-footer {
	background: var(--rk-black);
	color: #C7C7C4;
	margin-top: 40px;
	padding: 56px 0 40px;
}
.rk-footer__top {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.rk-footer .rk-logo { height: 32px; }
.rk-footer__columns { display: flex; gap: 56px; flex-wrap: wrap; }
.rk-footer__column { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.rk-footer__heading { color: var(--rk-white); font-weight: 700; margin-bottom: 2px; }
.rk-footer__list { display: flex; flex-direction: column; gap: 10px; }
.rk-footer__legal {
	border-top: 1px solid #333333;
	padding-top: 20px;
	font-size: 12px;
	color: var(--rk-muted);
}
.rk-footer__legal p { margin: 0 0 6px; }

/* =========================================================
   Hero
   ========================================================= */
.rk-hero {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	padding: 48px 0 64px;
}
.rk-hero__tabs {
	display: flex;
	gap: 4px;
	background: var(--rk-off-white);
	border-radius: var(--rk-radius-pill);
	padding: 4px;
}
.rk-hero__tab {
	border: none;
	border-radius: var(--rk-radius-pill);
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 700;
	background: transparent;
	color: var(--rk-gray);
}
.rk-hero__tab.is-active { background: var(--rk-red); color: var(--rk-white); }
.rk-hero__subhead { font-size: 19px; max-width: 600px; }
.rk-hero--illustrated .rk-cr-goal-btn { background: var(--rk-white); }
@media (max-width: 640px) {
	.rk-hero__bg { width: 150px !important; height: 150px !important; top: -50px !important; right: 0 !important; opacity: 0.12 !important; }
}
.rk-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.rk-hero__chips { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

/* =========================================================
   Cards / grids
   ========================================================= */
.rk-grid { display: grid; gap: var(--rk-gap); }
.rk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rk-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) {
	.rk-grid--2, .rk-grid--3, .rk-grid--4 { grid-template-columns: 1fr; }
}

.rk-card {
	border: 1px solid var(--rk-off-white);
	border-radius: var(--rk-radius);
	padding: 30px;
}
.rk-card--highlight {
	border: 2px solid var(--rk-orange);
	background: var(--rk-light-orange);
	position: relative;
}
/* Green highlight for the Rental Kharma option on the comparison, so the
   recommended card is not the same colour as the pricing ribbon elsewhere. */
.rk-card--highlight-green {
	border: 2px solid var(--rk-green);
	background: var(--rk-light-green);
	position: relative;
}
/* The alternatives being compared against. Soft pink fill with the brand
   pink as the border, so the card reads as a caution without the text
   fighting the background. */
.rk-card--warn {
	border: 2px solid var(--rk-pink);
	background: var(--rk-pink-soft);
	color: var(--rk-black);
}
.rk-card--warn h3 { color: var(--rk-black); }
.rk-card__ribbon {
	position: absolute;
	top: -14px;
	left: 24px;
	background: var(--rk-red);
	color: var(--rk-white);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: var(--rk-radius-pill);
}
.rk-card__eyebrow {
	font-size: 12px;
	font-weight: 700;
	color: var(--rk-orange);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.rk-card__price {
	font-family: var(--rk-font-heading);
	font-size: 32px;
	font-weight: 700;
	color: var(--rk-green);
}
.rk-checklist li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 10px;
}
.rk-checklist li::before {
	content: "\2713";
	color: var(--rk-green);
	font-weight: 700;
}

/* Before / after panel */
.rk-split-panel {
	border-radius: 20px;
	padding: 32px;
	color: var(--rk-white);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.rk-split-panel--negative { background: var(--rk-red); }
.rk-split-panel--positive { background: var(--rk-green); }
.rk-split-panel__label {
	font-family: var(--rk-font-heading);
	font-size: clamp(21px, 3.2vw, 27px);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
	font-weight: 700;
}
/* The global `ul { list-style: none }` strips markers everywhere, so lists
   that want bullets draw their own. */
.rk-split-panel li,
.rk-bullets li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.rk-split-panel li::before,
.rk-bullets li::before {
	content: "\2022";
	flex-shrink: 0;
	line-height: 1.4;
	opacity: 0.7;
}
/* Marker variants for lists that are making a point rather than just
   listing: a tick for what we do, a cross for what we don't. */
.rk-bullets--check li::before {
	content: "\2713";
	color: var(--rk-green);
	font-weight: 700;
	opacity: 1;
}
.rk-bullets--cross li::before {
	content: "\2715";
	color: var(--rk-red);
	font-weight: 700;
	opacity: 1;
}

/* Stat / CTA band */
.rk-band {
	border-radius: 20px;
	background: var(--rk-green);
	color: var(--rk-white);
	padding: 44px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

/* =========================================================
   FAQ accordion
   ========================================================= */
.rk-faq__item {
	border: 1px solid var(--rk-off-white);
	border-radius: var(--rk-radius);
	overflow: hidden;
	margin-bottom: 16px;
}
.rk-faq__question {
	width: 100%;
	text-align: left;
	background: var(--rk-white);
	border: none;
	padding: 20px 24px;
	font-size: 16px;
	font-weight: 600;
	color: var(--rk-black);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.rk-faq__icon { font-size: 20px; color: var(--rk-red); line-height: 1; flex-shrink: 0; }
.rk-faq__answer { padding: 0 24px 24px; font-size: 15px; }
.rk-faq__answer p { margin: 0; }
.rk-faq__answer[hidden] { display: none; }

/* =========================================================
   Compare table
   ========================================================= */
.rk-table {
	border: 1px solid var(--rk-off-white);
	border-radius: var(--rk-radius);
	overflow: hidden;
	width: 100%;
	border-collapse: collapse;
}
.rk-table th, .rk-table td {
	text-align: left;
	padding: 14px 16px;
	font-size: 14px;
}
.rk-table thead th {
	background: var(--rk-off-white);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.rk-table tbody tr + tr td { border-top: 1px solid var(--rk-off-white); }

@media (max-width: 640px) {
	.rk-table { display: block; overflow-x: auto; }
}

/* =========================================================
   Score estimator (illustrative widget)
   ========================================================= */
.rk-estimator {
	border: 1px solid var(--rk-off-white);
	border-radius: var(--rk-radius);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.rk-estimator__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--rk-gray);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.rk-estimator__options { display: flex; gap: 10px; flex-wrap: wrap; }
.rk-estimator__age {
	border-radius: var(--rk-radius-pill);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	border: 2px solid var(--rk-red);
	background: var(--rk-white);
	color: var(--rk-gray);
}
.rk-estimator__age.is-active { background: var(--rk-red); color: var(--rk-white); }
.rk-estimator__output {
	font-family: var(--rk-font-heading);
	font-size: 36px;
	font-weight: 700;
	color: var(--rk-green);
}

/* =========================================================
   Partner landing pages
   ========================================================= */
.rk-partner-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--rk-green);
	color: var(--rk-white);
	border-radius: var(--rk-radius-pill);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	margin-top: 14px;
}
.rk-partner-badge strong { font-weight: 800; letter-spacing: 0.03em; }

/* =========================================================
   Blog — archive + single post
   ========================================================= */
.rk-post-card {
	border: 1px solid var(--rk-off-white);
	border-radius: var(--rk-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.rk-post-card__image {
	aspect-ratio: 16 / 10;
	background: var(--rk-off-white);
	overflow: hidden;
}
.rk-post-card__image img { width: 100%; height: 100%; object-fit: cover; }
.rk-post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.rk-post-card__category {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rk-green);
}
.rk-post-card__title { font-size: 18px; margin: 0; }
.rk-post-card__title a { color: var(--rk-black); }
.rk-post-card__excerpt { font-size: 14px; color: var(--rk-gray); margin: 0; flex-grow: 1; }
.rk-post-card__meta { font-size: 12px; color: var(--rk-muted); }

.rk-post-hero {
	background: var(--rk-black);
	color: var(--rk-white);
	padding: 48px 0;
}
.rk-post-hero h1 { color: var(--rk-white); margin-bottom: 12px; }
.rk-post-hero__meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 600;
	color: #C7C7C4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rk-prose { font-size: 17px; line-height: 1.7; }
.rk-prose h2 { margin-top: 1.6em; font-size: 28px; }
.rk-prose h3 { margin-top: 1.4em; font-size: 22px; }
.rk-prose p { margin: 0 0 1.2em; }
.rk-prose ul, .rk-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.rk-prose li { margin-bottom: 0.5em; }
.rk-prose a { color: var(--rk-red); font-weight: 600; text-decoration: underline; }
.rk-prose a.rk-btn { text-decoration: none; }
.rk-prose a.rk-btn--primary { color: var(--rk-white); }
.rk-prose a.rk-btn--secondary { color: var(--rk-gray); }
.rk-prose img { border-radius: var(--rk-radius); height: auto; }
.rk-prose blockquote {
	margin: 1.6em 0;
	padding: 20px 24px;
	background: var(--rk-off-white);
	border-radius: var(--rk-radius-sm);
	font-style: italic;
}
.rk-prose blockquote p:last-child { margin-bottom: 0; }

/* =========================================================
   Credit Ready assessment (standalone experience)
   ========================================================= */
.rk-cr-header {
	border-bottom: 1px solid var(--rk-off-white);
	padding: 18px 0;
}
.rk-cr-header .rk-logo { height: 32px; }
.rk-cr-app {
	max-width: 720px;
	margin: 0 auto;
	padding: 64px 20px 96px;
}
.rk-cr-step { display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.rk-cr-step[hidden] { display: none; }
.rk-cr-step h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.rk-cr-step h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.rk-cr-goals {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	width: 100%;
	max-width: 520px;
}
.rk-cr-goal-btn {
	border: 2px solid var(--rk-off-white);
	background: var(--rk-white);
	border-radius: var(--rk-radius);
	padding: 28px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--rk-black);
	cursor: pointer;
}
.rk-cr-goal-btn:hover { border-color: var(--rk-red); }
.rk-cr-goal-btn svg { color: var(--rk-red); }

.rk-cr-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 420px;
}
.rk-cr-option {
	border: 2px solid var(--rk-off-white);
	background: var(--rk-white);
	border-radius: var(--rk-radius-sm);
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--rk-black);
	cursor: pointer;
	text-align: left;
}
.rk-cr-option:hover { border-color: var(--rk-red); }
.rk-cr-option.is-active { border-color: var(--rk-green); background: var(--rk-light-green); }

.rk-cr-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 480px; }
.rk-cr-chip {
	border: 2px solid var(--rk-off-white);
	background: var(--rk-white);
	border-radius: var(--rk-radius-pill);
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rk-black);
	cursor: pointer;
}
.rk-cr-chip.is-active { border-color: var(--rk-green); background: var(--rk-light-green); }

.rk-cr-results {
	background: var(--rk-off-white);
	border-radius: var(--rk-radius);
	padding: 32px;
	width: 100%;
	text-align: left;
}
.rk-cr-results ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rk-cr-results li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 600; }
.rk-cr-results li::before { content: "\2713"; color: var(--rk-green); font-weight: 700; }

.rk-lesson__hook { font-size: 19px; font-weight: 600; color: var(--rk-gray); margin-top: -6px; }
.rk-lesson__audio { margin: 20px 0; }
.rk-lesson__letter {
	background: var(--rk-off-white);
	border-radius: var(--rk-radius);
	padding: 24px;
	font-family: monospace;
	font-size: 13px;
	line-height: 1.7;
	margin: 20px 0;
	white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   Forms (partner site intake)
   --------------------------------------------------------------------------- */

.rk-form { max-width: 860px; }

.rk-fieldset {
	border: none;
	padding: 0;
	margin: 0 0 40px;
}

.rk-form__legend {
	font-family: 'Jost', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--rk-green);
	padding: 0;
	margin-bottom: 8px;
}

.rk-fieldset__intro {
	color: var(--rk-muted);
	font-size: 15px;
	max-width: 620px;
	margin: 0 0 20px;
}

.rk-form__group { margin-bottom: 20px; }

.rk-form__label {
	display: block;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 6px;
	color: var(--rk-gray);
}

.rk-form__optional {
	font-weight: 400;
	font-size: 13px;
	color: var(--rk-muted);
}

.rk-form__input {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	color: var(--rk-gray);
	background: #fff;
	border: 1px solid #d5d9d6;
	border-radius: var(--rk-radius);
	padding: 11px 14px;
}

.rk-form__input:focus {
	outline: none;
	border-color: var(--rk-green);
	box-shadow: 0 0 0 3px rgba(46, 125, 80, 0.15);
}

.rk-form__input.is-invalid { border-color: #c0392b; }

textarea.rk-form__input { line-height: 1.6; resize: vertical; }

.rk-form__help {
	font-size: 13px;
	color: var(--rk-muted);
	margin: 6px 0 0;
	line-height: 1.6;
}

.rk-form__error {
	font-size: 13px;
	font-weight: 600;
	color: #c0392b;
	margin: 6px 0 0;
}

.rk-form__checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	cursor: pointer;
}

.rk-form__checkbox input { width: 18px; height: 18px; }

.rk-stat-row {
	display: grid;
	grid-template-columns: 110px 1fr 1fr 170px;
	gap: 12px;
	padding: 16px;
	background: var(--rk-off-white);
	border-radius: var(--rk-radius);
	margin-bottom: 12px;
}

.rk-stat-row .rk-form__group { margin-bottom: 0; }

.rk-alert {
	background: var(--rk-off-white);
	border-left: 4px solid var(--rk-green);
	border-radius: var(--rk-radius);
	padding: 16px 20px;
	font-size: 15px;
	line-height: 1.6;
}

.rk-alert--error {
	background: #fdf2f1;
	border-left-color: #c0392b;
}

.rk-alert ul { margin: 8px 0 0; padding-left: 20px; }
.rk-alert li { margin-bottom: 4px; }

@media (max-width: 720px) {
	.rk-stat-row { grid-template-columns: 1fr; }
}

/* Industry chooser on step 1 of the partner intake. */

.rk-industry-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
}

.rk-industry-choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px;
	background: #fff;
	border: 1px solid #d5d9d6;
	border-radius: var(--rk-radius);
	cursor: pointer;
}

.rk-industry-choice:hover { border-color: var(--rk-green); }

.rk-industry-choice input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }

/* :has lets the whole card show selection without any JS. Browsers without it
   still show the radio itself, so nothing is lost. */
.rk-industry-choice:has(input:checked) {
	border-color: var(--rk-green);
	box-shadow: 0 0 0 2px rgba(46, 125, 80, 0.18);
}

.rk-industry-choice:has(input:focus-visible) { outline: 2px solid var(--rk-green); outline-offset: 2px; }

.rk-industry-choice__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rk-industry-choice__label { font-weight: 600; font-size: 15px; color: var(--rk-gray); }
.rk-industry-choice__blurb { font-size: 13px; color: var(--rk-muted); line-height: 1.5; }