/*
 * kotobakards.com
 *
 * Tokens are the live site's own, read from its Astra and Elementor CSS variables on 2026-10-21,
 * so the rebuild keeps the colors visitors already see. They happen to be identical to the app's
 * design system in css/kk-design.css -- #A40021, #7A0019, #212529 -- which is why the two
 * properties have always looked related.
 *
 * Not shared with that file on purpose. kk-design.css is built on Bootstrap and carries the whole
 * application UI; this site is text and needs none of it. The page it replaces loaded 683 KB over
 * 75 requests.
 */

:root {
	--kk-primary: #A40021;
	--kk-primary-dark: #7A0019;
	--kk-text: #212529;
	--kk-muted: #6b7280;
	--kk-bg: #ffffff;
	--kk-surface: #F6F6F6;
	--kk-border: #e5e7eb;

	--kk-radius: 12px;
	--kk-measure: 46rem;        /* comfortable line length for prose */
	--kk-wide: 72rem;           /* header, footer, listings */
	--kk-band-width: 1500px;    /* Elementor's container content-width on the carried-over pages */

	/* Roboto, because that is what the site uses: Elementor's global typography names it for
	   primary, text and accent, and every widget's font-family resolves to it. Inter was a
	   guess and read noticeably differently. Noto Sans JP stays second -- Roboto has no CJK
	   glyphs, so without it Japanese falls through to whatever the device happens to have. */
	--kk-font: "Roboto", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* The header is a dark bar, not a light one: Astra's global colour 2, with links a shade
	   off white that go solid on hover. */
	--kk-header-bg: #212529;
	--kk-header-link: rgba(242, 245, 247, .76);
}

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

body {
	margin: 0;
	font-family: var(--kk-font);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--kk-text);
	background: var(--kk-bg);
	-webkit-text-size-adjust: 100%;
}

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

img { max-width: 100%; height: auto; }

.kk-skip {
	position: absolute;
	left: -9999px;
}
.kk-skip:focus {
	left: 1rem;
	top: 1rem;
	z-index: 10;
	padding: .5rem .75rem;
	background: var(--kk-bg);
	border: 2px solid var(--kk-primary);
	border-radius: var(--kk-radius);
}

/* ---------------------------------------------------------------- buttons */

.kk-btn {
	display: inline-block;
	padding: .55rem 1.1rem;
	border-radius: var(--kk-radius);
	background: var(--kk-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--kk-primary);
}
.kk-btn:hover { background: var(--kk-primary-dark); border-color: var(--kk-primary-dark); color: #fff; }

.kk-btn--ghost { background: transparent; color: var(--kk-primary); }
.kk-btn--ghost:hover { background: var(--kk-surface); color: var(--kk-primary-dark); }

/* On the dark header the ghost button would be a red outline on near-black. */
.kk-header .kk-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.kk-header .kk-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------------------------------------------------------------- header */

.kk-header {
	background: var(--kk-header-bg);
}
.kk-header__inner {
	max-width: var(--kk-wide);
	margin: 0 auto;
	padding: .75rem 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}
.kk-header__brand {
	font-weight: 700;
	font-size: 1.25rem;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

/* The header bar is 75px tall on the live site; the inner padding here gets close enough
   without pinning a height that the mobile menu then has to fight. */
.kk-header__inner { min-height: 75px; }
.kk-header__actions { margin-left: auto; display: flex; gap: .5rem; }

.kk-nav { flex: 1; }
.kk-nav__checkbox { position: absolute; opacity: 0; pointer-events: none; }
.kk-nav__toggle { display: none; }
.kk-nav__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.kk-nav__link {
	color: var(--kk-header-link);
	text-decoration: none;
	font-size: .95rem;
	padding: .25rem 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.kk-nav__link:hover { color: #fff; }
.kk-nav__link.is-current { color: #fff; border-bottom-color: #fff; }

/* ---- the How It Works dropdown ---- */
.kk-nav__group { position: relative; }
.kk-nav__link--parent { display: inline-flex; align-items: center; gap: .35rem; }
.kk-nav__caret {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}
.kk-nav__submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 13rem;
	padding: .5rem 0;
	background: var(--kk-header-bg);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--kk-radius);
}
/* Hover for a mouse, focus-within for a keyboard. No script either way. */
.kk-nav__group:hover .kk-nav__submenu,
.kk-nav__group:focus-within .kk-nav__submenu { display: block; }
.kk-nav__sublink {
	display: block;
	padding: .45rem 1rem;
	color: var(--kk-header-link);
	text-decoration: none;
	font-size: .95rem;
	white-space: nowrap;
}
.kk-nav__sublink:hover, .kk-nav__sublink.is-current { color: #fff; background: rgba(255, 255, 255, .08); }

/* Below the header's natural breakpoint the links collapse behind the checkbox. No JavaScript,
   and -- unlike the <details> this replaced -- nothing the browser can decide to keep hidden on a
   wide screen. */
@media (max-width: 60rem) {
	.kk-nav { flex: 0; }
	.kk-nav__toggle {
		display: block;
		cursor: pointer;
		padding: .5rem;
	}
	.kk-nav__links { display: none; }
	.kk-nav__checkbox:checked ~ .kk-nav__links { display: flex; }
	.kk-nav__checkbox:focus-visible ~ .kk-nav__toggle { outline: 2px solid var(--kk-primary); }
	.kk-nav__bars,
	.kk-nav__bars::before,
	.kk-nav__bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: #fff;
		content: "";
	}
	.kk-nav__bars::before { transform: translateY(-7px); }
	.kk-nav__bars::after { transform: translateY(5px); }

	.kk-nav__links {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 5;
		flex-direction: column;
		gap: 0;
		padding: .5rem 1rem 1rem;
		background: var(--kk-header-bg);
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}
	.kk-nav__link { padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.kk-nav__link.is-current { border-bottom-color: #fff; }

	/* No hover on a touch screen: the submenu is simply always open, indented. */
	.kk-nav__group { position: static; }
	.kk-nav__submenu {
		display: block;
		position: static;
		border: 0;
		padding: 0 0 0 1rem;
		min-width: 0;
	}
	.kk-nav__caret { display: none; }
}

/* ---------------------------------------------------------------- layout */

main { display: block; }

.kk-post, .kk-listing {
	max-width: var(--kk-measure);
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
}
.kk-listing { max-width: var(--kk-wide); }

.kk-crumbs { font-size: .9rem; color: var(--kk-muted); margin-bottom: 1rem; }
.kk-crumbs a { color: var(--kk-muted); }
.kk-crumbs a:hover { color: var(--kk-primary); }
.kk-crumbs span { margin: 0 .4rem; }

h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.25; margin: 0 0 .5rem; }

.kk-post__meta { color: var(--kk-muted); font-size: .9rem; margin: 0 0 2rem; }
.kk-tag {
	display: inline-block;
	margin-left: .5rem;
	padding: .1rem .5rem;
	border: 1px solid var(--kk-border);
	border-radius: 999px;
	font-size: .8rem;
	text-decoration: none;
}

.kk-post__footer {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--kk-border);
	color: var(--kk-muted);
}

/* ---------------------------------------------------------------- prose */

.kk-prose h2 { font-size: 1.5rem; margin: 2.25rem 0 .75rem; line-height: 1.3; }
.kk-prose h3 { font-size: 1.2rem; margin: 1.75rem 0 .5rem; }
.kk-prose p { margin: 0 0 1.1rem; }
.kk-prose ul, .kk-prose ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.kk-prose li { margin-bottom: .4rem; }
.kk-prose hr { border: 0; border-top: 1px solid var(--kk-border); margin: 2rem 0; }
.kk-prose img { border-radius: var(--kk-radius); }
.kk-prose code {
	background: var(--kk-surface);
	padding: .1rem .35rem;
	border-radius: 4px;
	font-size: .9em;
}
.kk-prose blockquote {
	margin: 1.5rem 0;
	padding: .75rem 1.25rem;
	border-left: 4px solid var(--kk-primary);
	background: var(--kk-surface);
	border-radius: 0 var(--kk-radius) var(--kk-radius) 0;
}
.kk-prose blockquote p { margin: 0; }

/* Furigana. 49 of the imported posts use <ruby>, and it is the one piece of markup this site
   genuinely cannot do without. */
.kk-prose ruby { ruby-position: over; }
.kk-prose rt { font-size: .6em; color: var(--kk-muted); }

/* Tables carried over from TablePress, which arrived with their classes stripped. */
.kk-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: .95rem;
	display: block;
	overflow-x: auto;          /* wide tables scroll rather than breaking the layout on a phone */
}
.kk-prose th, .kk-prose td {
	border: 1px solid var(--kk-border);
	padding: .5rem .7rem;
	text-align: left;
	vertical-align: top;
}
.kk-prose thead th { background: var(--kk-surface); font-weight: 600; }

/* The anchor spans that preserve Elementor's indexed heading fragments. They must occupy no
   space but still be a scroll target, and sit clear of the sticky-free header. */
.kk-anchor { display: block; height: 0; scroll-margin-top: 1rem; }
.kk-prose h2, .kk-prose h3 { scroll-margin-top: 1rem; }

/* ---------------------------------------------------------------- table of contents */

.kk-toc {
	margin: 1.5rem 0 2rem;
	padding: 1rem 1.25rem;
	background: var(--kk-surface);
	border-radius: var(--kk-radius);
}
.kk-toc__title { font-size: 1.05rem; margin: 0 0 .5rem; }
.kk-toc__list { list-style: none; margin: 0; padding: 0; }
.kk-toc__item { margin: .2rem 0; }
.kk-toc__item--h3 { padding-left: 1rem; }
.kk-toc__item--h4, .kk-toc__item--h5, .kk-toc__item--h6 { padding-left: 2rem; }

/* ---------------------------------------------------------------- in-post CTA */

.kk-post-cta {
	margin: 2.5rem 0;
	padding: 1.5rem;
	background: var(--kk-surface);
	border-radius: var(--kk-radius);
	text-align: center;
}
.kk-post-cta img { width: 64px; height: 64px; border-radius: 0; }
.kk-post-cta h2 { font-size: 1.3rem; margin: .5rem 0; }
.kk-post-cta p { margin: 0 0 1rem; color: var(--kk-muted); }

/* ---------------------------------------------------------------- listings */

.kk-listing__header { margin-bottom: 2rem; }
.kk-listing__intro { color: var(--kk-muted); margin: 0; }

.kk-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
.kk-card {
	padding: 1.25rem;
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius);
	background: var(--kk-bg);
}
.kk-card__title { font-size: 1.1rem; margin: 0 0 .25rem; line-height: 1.4; }
.kk-card__title a { text-decoration: none; }
.kk-card__title a:hover { text-decoration: underline; }
.kk-card__meta { color: var(--kk-muted); font-size: .85rem; margin: 0 0 .5rem; }
.kk-card__summary { margin: 0; font-size: .95rem; }

.kk-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--kk-border);
}
.kk-pager__count { color: var(--kk-muted); font-size: .9rem; }
.kk-pager__link { text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------- footer */

.kk-footer {
	border-top: 1px solid var(--kk-border);
	background: var(--kk-surface);
	margin-top: 3rem;
}
.kk-footer__inner {
	max-width: var(--kk-wide);
	margin: 0 auto;
	padding: 2rem 1rem;
}
.kk-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin-bottom: 1rem;
}
.kk-footer__links a { color: var(--kk-text); text-decoration: none; font-size: .95rem; }
.kk-footer__links a:hover { color: var(--kk-primary); text-decoration: underline; }
.kk-footer__legal { margin: 0; color: var(--kk-muted); font-size: .85rem; }

/* ---------------------------------------------------------------- pages */

.kk-page {
	max-width: var(--kk-wide);
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
}
.kk-page__header { margin-bottom: 2rem; }

/* Legal pages and other long prose read better at a measured width even on a wide page. */
.kk-prose--wide { max-width: var(--kk-measure); }
.kk-prose--wide .kk-feature,
.kk-prose--wide .kk-stat { max-width: none; }

/*
 * Feature tiles, converted from Elementor's icon-box. Consecutive ones form a grid without any
 * wrapper element, which the converted content has no way to emit: each tile is its own block,
 * and they are laid out by being siblings.
 */
.kk-feature {
	padding: 1.1rem 1.25rem;
	margin: 0 0 1rem;
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius);
	background: var(--kk-bg);
}
.kk-feature h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.kk-feature p { margin: 0; color: var(--kk-muted); font-size: .95rem; }

@supports (display: grid) {
	/* Tiles sit side by side from tablet up, using the same measure as the cards grid. */
	.kk-prose .kk-feature { display: block; }
}
@media (min-width: 48rem) {
	.kk-feature { display: inline-block; width: calc(50% - .6rem); vertical-align: top; }
	.kk-feature + .kk-feature { margin-left: .5rem; }
}

/* Statistics, converted from Elementor's counter. The live site animates these up from zero;
   rendered static, so a crawler and a reader without JavaScript both see the real number. */
.kk-stat {
	display: inline-block;
	min-width: 9rem;
	margin: 0 1rem 1.25rem 0;
	text-align: center;
}
.kk-stat__value {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	color: var(--kk-primary);
	line-height: 1.1;
}
.kk-stat__label { display: block; color: var(--kk-muted); font-size: .9rem; }

/* The pricing FAQ, converted from Elementor's accordion -- which was already <details> in the
   source, so it needs no JavaScript here either. */
.kk-faq { margin: 1.5rem 0; }
.kk-faq details {
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius);
	margin-bottom: .5rem;
	background: var(--kk-bg);
}
.kk-faq summary {
	padding: .85rem 1.1rem;
	cursor: pointer;
	font-weight: 600;
}
.kk-faq details[open] summary { border-bottom: 1px solid var(--kk-border); }
.kk-faq details p { margin: 0; padding: .85rem 1.1rem; }

/* ---------------------------------------------------------------- forms */

.kk-page--narrow { max-width: var(--kk-measure); }
.kk-page__intro { color: var(--kk-muted); margin: 0 0 2rem; }

.kk-form { max-width: 34rem; }
.kk-form__row { display: flex; gap: 1rem; flex-wrap: wrap; }
.kk-form__row .kk-field { flex: 1 1 12rem; }

.kk-field { margin-bottom: 1.1rem; }
.kk-field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.kk-field input,
.kk-field select,
.kk-field textarea {
	width: 100%;
	padding: .55rem .7rem;
	font: inherit;
	color: inherit;
	background: var(--kk-bg);
	border: 1px solid var(--kk-border);
	border-radius: var(--kk-radius-input, 6px);
}
.kk-field input:focus,
.kk-field select:focus,
.kk-field textarea:focus {
	outline: 2px solid var(--kk-primary);
	outline-offset: 1px;
	border-color: var(--kk-primary);
}
.kk-field [aria-invalid="true"] { border-color: var(--kk-primary); }
.kk-field__error { margin: .3rem 0 0; color: var(--kk-primary); font-size: .85rem; }
.kk-field textarea { resize: vertical; }

/* The honeypot. Hidden from sight without display:none, which some bots check for. */
.kk-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kk-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--kk-radius);
	margin-bottom: 1.5rem;
	border: 1px solid var(--kk-border);
	background: var(--kk-surface);
}
.kk-notice h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.kk-notice p { margin: 0 0 .5rem; }
.kk-notice p:last-child { margin-bottom: 0; }
.kk-notice--bad { border-color: var(--kk-primary); }

/* ---------------------------------------------------------------- home page opening

   The home page is a converted row like every other page, so it has no hero element of its own.
   Its first heading and the paragraph under it are styled as one instead -- which keeps the page
   editable rather than making the site's front door the one thing nobody can change. */

body.kk-home .kk-page__header { display: none; }           /* the row's title repeats the logo */
body.kk-home .kk-prose > img:first-child {
	display: block;
	max-width: 22rem;
	margin: 0 auto 1.5rem;
}
body.kk-home .kk-prose > h2:first-of-type {
	font-size: clamp(1.6rem, 3.5vw, 2.3rem);
	text-align: center;
	line-height: 1.25;
	margin-top: 0;
}
body.kk-home .kk-prose > h2:first-of-type + p {
	text-align: center;
	font-size: 1.1rem;
	color: var(--kk-muted);
	max-width: 44rem;
	margin-inline: auto;
}
body.kk-home .kk-stat + .kk-stat { margin-left: 0; }
body.kk-home .kk-prose { text-align: center; }
body.kk-home .kk-prose > p,
body.kk-home .kk-prose > ul,
body.kk-home .kk-prose > ol { text-align: left; }
body.kk-home .kk-prose > h2:first-of-type + p { text-align: center; }


/* ================================================================ carried-over page layouts
 *
 * Elementor built these pages from flexbox containers: full-width bands with a background, rows
 * of proportioned columns, and cards. The first import discarded all of it and the pages came
 * out as one narrow column of text -- the home page, pricing, and the landing page paid ads
 * point at.
 *
 * The structure now travels in the body as HTML wrapping Markdown, because functions/markdown.php
 * passes block-level HTML through and still parses the Markdown inside it. So the layout is back
 * without the pages becoming the one thing on the site nobody can edit.
 *
 * Widths come from Elementor as a --kk-w custom property per column, so a 40/60 row stays 40/60
 * rather than being rounded to halves.
 */

/* A page whose body carries bands manages its own width and padding: the bands are full-bleed,
   and anything clamping them would leave the colour stopping short of the viewport edge. */
.kk-page--layout { max-width: none; padding: 0; }
.kk-page--layout > .kk-prose { max-width: none; }

/*
 * Bands are as wide inside as Elementor's were: its container content-width on this site is
 * 1500px, not the 72rem the header and listings use. Clamping them to 72rem left the design
 * noticeably narrower than the page it reproduces.
 */
.kk-band { padding: 3.5rem 1.25rem; }
.kk-band > * { max-width: var(--kk-band-width); margin-left: auto; margin-right: auto; }
.kk-band + .kk-band { padding-top: 3.5rem; }

.kk-band--red { background: var(--kk-primary); color: #fff; }
.kk-band--red h1, .kk-band--red h2, .kk-band--red h3, .kk-band--red h4 { color: #fff; }
.kk-band--red a:not(.kk-btn) { color: #fff; }
.kk-band--light { background: var(--kk-surface); }

.kk-row {
	--kk-row-gap: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--kk-row-gap);
	align-items: center;
}
.kk-row--reverse { flex-direction: row-reverse; }

/*
 * flex-basis carries the Elementor width; min-width:0 stops a long unbroken string -- a URL, a
 * run of kanji -- from forcing the column wider than its share.
 *
 * A FULL gap is subtracted per column, not half of one. Percentages and gap do not share a
 * budget: three 33.33% columns plus two 2.5rem gaps come to 100% + 2.5rem and the third wraps
 * onto its own line, which is what "Learn Japanese your way" did -- two cards and then one.
 * Subtracting a whole gap each is slightly over-generous for two columns and exactly right for
 * three; flex-grow absorbs the remainder either way.
 */
.kk-col {
	flex: 1 1 calc(var(--kk-w, 50%) - var(--kk-row-gap));
	min-width: 0;
}

/* A card is a container that had its own background inside a row: the three white panels on the
   red "Learn Japanese your way" band, and the feature tiles elsewhere. */
.kk-card {
	background: var(--kk-bg);
	color: var(--kk-text);
	border-radius: var(--kk-radius);
	padding: 1.75rem;
}
.kk-card h1, .kk-card h2, .kk-card h3, .kk-card h4 { color: var(--kk-text); }
.kk-card a:not(.kk-btn) { color: var(--kk-primary); }
.kk-card--light { background: var(--kk-surface); }

/* Elementor's button widget converts to a plain Markdown link, which is right for the content
   and wrong for the look. A row of them is wrapped in .kk-actions at import, so the links can be
   styled as buttons without the body carrying presentation. */
.kk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	margin: 1.5rem 0;
}
.kk-actions > p { margin: 0; }
.kk-actions a {
	display: inline-block;
	padding: .55rem 1.1rem;
	border-radius: var(--kk-radius);
	background: var(--kk-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--kk-primary);
}
.kk-actions a:hover { background: var(--kk-primary-dark); border-color: var(--kk-primary-dark); }

/* On red, the filled button would disappear: invert it. The second and later buttons in a group
   become outlines, which is how the hero's pair reads on the WordPress page. */
.kk-band--red .kk-actions a {
	background: #fff;
	color: var(--kk-primary);
	border-color: #fff;
}
.kk-band--red .kk-actions a:hover { background: rgba(255, 255, 255, .85); color: var(--kk-primary-dark); }
.kk-band:not(.kk-band--red) .kk-actions a:nth-child(n+2) {
	background: transparent;
	color: var(--kk-primary);
}
.kk-band:not(.kk-band--red) .kk-actions a:nth-child(n+2):hover { background: var(--kk-surface); }

/* The statistics strip: 4,500+ / 70+ / 2,300+. Each figure is already a .kk-stat from the
   counter widget; this is the row they sit in. */
.kk-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3rem;
	margin: 1.75rem 0;
}
.kk-band--red .kk-stat__value { color: #fff; }
.kk-band--red .kk-stat__label { color: rgba(255, 255, 255, .85); }

/* Any other row of widgets rather than of columns. */
.kk-inline { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }

.kk-band img { border-radius: var(--kk-radius); }
.kk-band > p:first-child, .kk-band > h2:first-child { margin-top: 0; }

/* Columns stack below the width where two of them stop being readable. The gap keeps the
   vertical rhythm once they do. */
@media (max-width: 60rem) {
	.kk-col { flex-basis: 100%; }
	.kk-row { --kk-row-gap: 2rem; }
	.kk-band { padding: 2.5rem 1rem; }
}

/* Available to a template that needs a heading in the document without showing it. */
.kk-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* ---------------------------------------------------------------- carried-over page detail */

/*
 * Heading sizes measured off the live page rather than invented: Elementor's own widgets use
 * 50 / 35 / 31 / 30 / 28 / 25 / 20px, and the theme's base h1 is 30px with h2 at 25px. The first
 * rebuild left everything at browser defaults, which read far smaller than the design.
 */
.kk-band h2 { font-size: 1.95rem; line-height: 1.25; margin: 0 0 .75rem; }
.kk-band h3 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 .6rem; }
.kk-band h4 { font-size: 1.2rem; line-height: 1.35; margin: 0 0 .5rem; }
.kk-band p { font-size: 1rem; line-height: 1.65; }
.kk-band--red p { color: rgba(255, 255, 255, .92); }

/* The first band is the logo lockup; on the live site it is a 200px-tall image and nothing
   else, and the band's own padding does the rest. */
.kk-band:first-child h2 { font-size: 2.4rem; }

/* Elementor sets text-align per widget. 32 of the home page's widgets carry one. */
.kk-center { text-align: center; }
.kk-center .kk-stats, .kk-center .kk-actions { justify-content: center; }
.kk-right { text-align: right; }

/*
 * An image with an explicit height in Elementor -- the home page logo at 200px. Without this it
 * rendered at its natural width and swallowed the band.
 */
.kk-img img {
	height: var(--kk-img-h, auto);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin-inline: auto;
}

/*
 * Responsive variants. Three graphics exist twice on the home page, a wide desktop version and
 * a stacked mobile one, and Elementor shows one and hides the other. Rendering both is what put
 * the same diagram on the page two ways.
 */
.kk-hide-desktop { display: none; }
@media (max-width: 60rem) {
	.kk-hide-desktop { display: block; }
	.kk-hide-mobile { display: none; }
	.kk-band h2 { font-size: 1.6rem; }
	.kk-band h3 { font-size: 1.3rem; }
}