/* ==========================================================================
   Uplift marketing site

   One stylesheet for every page, static and PHP alike. Plain CSS: custom
   properties for the tokens, mobile-first media queries, no build step.
   Sections run top to bottom in the order a page is assembled.
   ========================================================================== */

/* Tokens ------------------------------------------------------------------ */

:root {
	--ink: #1B2631;
	--ink-2: #232F3A;
	--ink-3: #2F3D4A;
	--text: #26313B;
	--muted: #5D6873;
	--paper: #F8F5EF;
	--paper-2: #F1ECE2;
	--white: #FFFFFF;
	--line: #E4DCCD;
	--line-dark: rgba(248, 245, 239, 0.14);

	--gold: #C59833;
	--gold-ink: #7F5C12;
	--gold-bright: #E9C46A;
	--gold-soft: #F4E8C8;
	--gold-fill: linear-gradient(0deg, #9F6D08 0%, #FFDD75 100%);
	--clay: #B78A71;
	--on-dark: #F8F5EF;
	--on-dark-muted: #B9C2CB;

	--font-display: "gelica", Georgia, "Times New Roman", serif;
	--font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--shadow-sm: 0 1px 2px rgba(27, 38, 49, 0.06), 0 2px 8px rgba(27, 38, 49, 0.05);
	--shadow: 0 2px 6px rgba(27, 38, 49, 0.06), 0 18px 40px -12px rgba(27, 38, 49, 0.18);
	--shadow-lg: 0 4px 10px rgba(27, 38, 49, 0.08), 0 40px 80px -24px rgba(27, 38, 49, 0.35);

	--container: 1200px;
	--gutter: 20px;
	--section: clamp(72px, 10vw, 136px);
	--header-h: 68px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
		--header-h: 76px;
	}
}

/* Base -------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background-color: var(--paper);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (min-width: 1024px) {
	body {
		font-size: 1.0625rem;
	}
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	padding: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background-color: var(--gold-soft);
	color: var(--ink);
}

button {
	font: inherit;
	color: inherit;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	z-index: 100;
	top: 12px;
	left: 12px;
	padding: 10px 16px;
	border-radius: 999px;
	background-color: var(--ink);
	color: var(--on-dark);
	font-weight: 600;
	transform: translateY(-200%);
	transition: transform 160ms ease;
}

.skip-link:focus {
	transform: none;
}

/* Typography -------------------------------------------------------------- */

h1,
h2,
h3,
.display {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

h1,
.h1 {
	font-size: clamp(2.6rem, 1.6rem + 4.6vw, 4.75rem);
	line-height: 1.02;
}

h2,
.h2 {
	font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
	line-height: 1.08;
}

h3,
.h3 {
	font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
	line-height: 1.2;
}

h4 {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
}

p {
	text-wrap: pretty;
}

.lead {
	font-size: clamp(1.075rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.6;
	color: var(--muted);
}

.muted {
	color: var(--muted);
}

.gold {
	color: var(--gold-ink);
}

/* Layout ------------------------------------------------------------------ */

.container {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
}

.container--narrow {
	--container: 760px;
}

.container--mid {
	--container: 1000px;
}

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

.section--tight {
	padding-block: calc(var(--section) * 0.7);
}

.section--paper-2 {
	background-color: var(--paper-2);
}

.section--white {
	background-color: var(--white);
}

.section--dark {
	background-color: var(--ink);
	color: var(--on-dark-muted);
}

.section--dark h2,
.section--dark h3 {
	color: var(--on-dark);
}

.section--dark .lead {
	color: var(--on-dark-muted);
}

.section-head {
	max-width: 760px;
	margin: 0 0 clamp(40px, 5vw, 64px) 0;
}

.section-head h2 + p,
.section-head h2 + .lead {
	margin-top: 20px;
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-foot {
	margin-top: clamp(36px, 5vw, 56px);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.section-foot--center {
	justify-content: center;
}

.grid {
	display: grid;
	gap: clamp(16px, 2.2vw, 28px);
}

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

	.grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

	.grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 720px) and (max-width: 1023px) {
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Buttons and badges ------------------------------------------------------ */

.btn {
	--btn-bg: var(--ink);
	--btn-fg: var(--on-dark);
	--btn-border: var(--btn-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1.5px solid var(--btn-border);
	border-radius: 999px;
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px rgba(27, 38, 49, 0.45);
	text-decoration: none;
}

.btn:active {
	transform: none;
}

.btn--ink {
	--btn-bg: var(--ink);
	--btn-fg: var(--on-dark);
}

/* The app's own call to action: mustard with bold white text. */
.btn--gold {
	--btn-bg: var(--gold);
	--btn-fg: var(--white);
	--btn-border: var(--gold);
	font-weight: 700;
}

.btn--gold:hover {
	--btn-bg: #B8892A;
	--btn-border: #B8892A;
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--ink);
	--btn-border: rgba(27, 38, 49, 0.25);
}

.btn--ghost:hover {
	--btn-border: var(--ink);
	box-shadow: none;
}

.btn--ghost-light {
	--btn-bg: transparent;
	--btn-fg: var(--on-dark);
	--btn-border: rgba(248, 245, 239, 0.35);
}

.btn--ghost-light:hover {
	--btn-border: var(--on-dark);
	box-shadow: none;
}

.btn--sm {
	min-height: 40px;
	padding: 8px 18px;
	font-size: 0.875rem;
}

.btn--lg {
	min-height: 56px;
	padding: 16px 30px;
	font-size: 1rem;
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.text-link {
	font-weight: 600;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.text-link:hover {
	color: var(--gold-ink);
}

.section--dark .text-link {
	color: var(--on-dark);
}

.section--dark .text-link:hover {
	color: var(--gold-bright);
}

.store-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.store-badges a {
	display: block;
	border-radius: 9px;
	transition: transform 160ms ease;
}

.store-badges a:hover {
	transform: translateY(-1px);
}

/* Apple and Google ask for their badges to be the same height; their
   proportions differ, so size by height. */
.store-badges img {
	width: auto;
	height: 44px;
}

/* What the hero promises, each with its icon. */
.assure {
	display: grid;
	gap: 12px;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--text);
}

.assure li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.assure svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--gold-ink);
}

/* Header ------------------------------------------------------------------ */

.site-header {
	position: sticky;
	z-index: 50;
	top: 0;
	background-color: rgba(248, 245, 239, 0.86);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.site-header.is-scrolled {
	border-bottom-color: var(--line);
}

.site-header__inner {
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: 24px;
}

.brand {
	display: block;
	flex: 0 0 auto;
	margin-right: auto;
}

.brand img {
	width: 96px;
	height: auto;
}

@media (min-width: 768px) {
	.brand img {
		width: 108px;
	}
}

.nav {
	display: none;
}

.nav__list {
	display: flex;
	gap: 4px;
	list-style: none;
}

.nav__list a {
	display: block;
	padding: 9px 14px;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms ease, color 160ms ease;
}

.nav__list a:hover,
.nav__list a[aria-expanded="true"] {
	background-color: rgba(27, 38, 49, 0.06);
	color: var(--ink);
}

.nav__list a[aria-current="page"] {
	color: var(--ink);
	font-weight: 600;
}

/* Mega menu ---------------------------------------------------------------

   One floating panel for every menu, the way Stripe does it: moving from
   one menu to the next, the panel slides and resizes to fit the new
   content and the arrow follows the pointer's menu. site.js measures the
   panel and sets --mega-x, --mega-w, --mega-h and --arrow-x. Without
   JavaScript the menu items are plain links to their section pages. */

.mega {
	--ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	position: absolute;
	z-index: 60;
	top: calc(100% - 6px);
	left: 0;
	width: var(--mega-w, 640px);
	height: var(--mega-h, 320px);
	transform: translate3d(var(--mega-x, 0px), 10px, 0) rotateX(-8deg);
	transform-origin: 50% -20px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	perspective: 1600px;
	transition: opacity 180ms ease, transform 220ms var(--ease), visibility 0s linear 220ms;
}

.mega.is-open {
	transform: translate3d(var(--mega-x, 0px), 0, 0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 180ms ease, transform 220ms var(--ease), visibility 0s;
}

/* Once open, moving between menus animates position and size. */
.mega.is-open.is-moving {
	transition: opacity 180ms ease, transform 320ms var(--ease), width 320ms var(--ease), height 320ms var(--ease), visibility 0s;
}

.mega__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 22px;
	background-color: var(--white);
	border: 1px solid rgba(27, 38, 49, 0.08);
	box-shadow: 0 2px 6px rgba(27, 38, 49, 0.06), 0 30px 70px -20px rgba(27, 38, 49, 0.35);
}

.mega__arrow {
	position: absolute;
	z-index: 1;
	top: -6px;
	left: var(--arrow-x, 50%);
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 3px 0 0 0;
	background-color: var(--white);
	border-top: 1px solid rgba(27, 38, 49, 0.08);
	border-left: 1px solid rgba(27, 38, 49, 0.08);
	transform: rotate(45deg);
}

.mega.is-moving .mega__arrow {
	transition: left 320ms var(--ease);
}

.mega__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
	max-width: calc(100vw - 48px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, transform 320ms var(--ease), visibility 0s linear 320ms;
}

.mega__panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 260ms ease 60ms, transform 320ms var(--ease), visibility 0s;
}

/* Which way the content slides depends on which way the pointer moved. */
.mega__panel.from-right {
	transform: translateX(56px);
	transition: none;
}

.mega__panel.from-left {
	transform: translateX(-56px);
	transition: none;
}

.mega__panel.to-left {
	transform: translateX(-56px);
}

.mega__panel.to-right {
	transform: translateX(56px);
}

.mega__body {
	display: flex;
	gap: 32px;
	padding: 26px 26px 24px 26px;
}

.mega__group {
	min-width: 0;
}

.mega__heading {
	margin: 0 0 10px 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
}

.mega__links {
	display: grid;
	gap: 2px;
	list-style: none;
}

.mega__links--2 {
	grid-template-columns: repeat(2, 232px);
	column-gap: 6px;
}

.mega__links a {
	display: block;
	padding: 10px 12px;
	border-radius: 12px;
	text-decoration: none;
	transition: background-color 140ms ease;
}

.mega__links a:hover,
.mega__links a:focus-visible {
	background-color: var(--paper);
}

.mega__links strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink);
}

.mega__links span {
	display: block;
	margin-top: 2px;
	font-size: 0.8438rem;
	line-height: 1.4;
	color: var(--muted);
}

.mega__links a:hover strong {
	color: var(--gold-ink);
}

.mega__feature {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 236px;
	flex: 0 0 auto;
	padding: 18px;
	border-radius: 16px;
	text-decoration: none;
	transition: transform 200ms ease;
}

.mega__feature:hover {
	transform: translateY(-2px);
}

.mega__feature img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	border-radius: 10px;
	background-color: var(--paper-2);
}

.mega__feature strong {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.2;
}

.mega__feature > span:not(.btn) {
	font-size: 0.8438rem;
	line-height: 1.45;
}

.mega__feature .btn {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 6px;
	transform: none;
}

.mega__feature--dark {
	background-color: var(--ink);
	color: var(--on-dark-muted);
}

.mega__feature--dark strong {
	color: var(--on-dark);
}

.mega__feature--dark img {
	height: 132px;
	object-fit: cover;
	object-position: top;
}

.mega__feature--paper {
	background-color: var(--paper-2);
	color: var(--muted);
}

.mega__feature--paper strong {
	color: var(--ink);
}

.mega__quote {
	font-size: 1.45rem !important;
	line-height: 1.15 !important;
	margin-bottom: 6px;
}

.mega__feature--image {
	padding: 0 0 4px 0;
	color: var(--muted);
}

.mega__feature--image img {
	margin-bottom: 8px;
}

.mega__feature--image strong {
	color: var(--ink);
}

.mega__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 12px 26px;
	border-top: 1px solid var(--line);
	background-color: var(--paper);
}

.mega__foot a {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.mega__foot a:hover {
	background-color: var(--paper-2);
}

@media (prefers-reduced-motion: reduce) {
	.mega,
	.mega.is-open,
	.mega.is-open.is-moving,
	.mega__panel,
	.mega__panel.is-active {
		transition: opacity 120ms linear, visibility 0s;
		transform: translate3d(var(--mega-x, 0px), 0, 0);
	}

	.mega__panel,
	.mega__panel.is-active,
	.mega__panel.from-right,
	.mega__panel.from-left,
	.mega__panel.to-left,
	.mega__panel.to-right {
		transform: none;
	}
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.menu-toggle {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	position: absolute;
	left: 12px;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--ink);
	transition: transform 200ms ease, opacity 200ms ease;
}

.menu-toggle__bars {
	top: 21px;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: '';
	left: 0;
}

.menu-toggle__bars::before {
	top: -6px;
}

.menu-toggle__bars::after {
	top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* The phone menu: a sheet over the page with its links in grouped lists,
   like an app's settings, and the call to action held at the bottom. It
   hangs from the header rather than being fixed, because the header's
   backdrop blur would trap a fixed child inside it. */
.mobile-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: calc(100dvh - var(--header-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid var(--line);
	background-color: var(--paper-2);
}

.mobile-nav nav {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	max-width: 560px;
	padding-top: 18px;
}

.mobile-nav__group + .mobile-nav__group {
	margin-top: 20px;
}

.mobile-nav__heading {
	margin: 0 0 7px 14px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
}

.mobile-nav ul {
	overflow: hidden;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: 14px;
	background-color: var(--white);
}

.mobile-nav a:not(.btn) {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 46px;
	padding: 0 38px 0 14px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}

/* Separators start after the icon, as in an iOS list. */
.mobile-nav li + li a:not(.btn) {
	background: linear-gradient(var(--line), var(--line)) 50px 0 / calc(100% - 50px) 1px no-repeat;
}

.mobile-nav a:not(.btn)::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 18px;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid #BFB5A4;
	border-right: 1.5px solid #BFB5A4;
	transform: translateY(-50%) rotate(45deg);
}

.mobile-nav a:not(.btn):active {
	background-color: var(--paper);
}

.mobile-nav a svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 4px;
	border-radius: 7px;
	background-color: var(--gold-soft);
	color: var(--gold-ink);
}

.mobile-nav a[aria-current="page"] {
	font-weight: 600;
	color: var(--gold-ink);
}

.mobile-nav__action {
	position: sticky;
	bottom: 0;
	margin-top: auto;
	padding: 24px 0 calc(16px + env(safe-area-inset-bottom));
	background: linear-gradient(to bottom, rgba(241, 236, 226, 0), var(--paper-2) 32%);
}

@media (min-width: 1080px) {
	.nav {
		display: block;
	}

	.brand {
		margin-right: 0;
	}

	.nav {
		margin-inline: auto;
	}

	.menu-toggle,
	.mobile-nav {
		display: none !important;
	}
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
	padding: clamp(56px, 8vw, 88px) 0 32px 0;
	background-color: var(--ink);
	color: var(--on-dark-muted);
	font-size: 0.9375rem;
}

.site-footer a {
	color: var(--on-dark-muted);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--on-dark);
	text-decoration: underline;
}

.site-footer__grid {
	display: grid;
	gap: 40px 32px;
	grid-template-columns: repeat(2, 1fr);
}

.site-footer__brand {
	grid-column: 1 / -1;
	max-width: 340px;
}

.site-footer__brand img {
	width: 112px;
	margin: 0 0 16px 0;
}

.site-footer h2 {
	margin: 0 0 14px 0;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--on-dark);
}

.site-footer ul {
	list-style: none;
}

.site-footer nav li + li {
	margin-top: 10px;
}

.socials {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
}

.socials a:hover {
	border-color: var(--gold-bright);
	color: var(--gold-bright);
}

.socials svg {
	width: 18px;
	height: 18px;
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	align-items: center;
	margin-top: clamp(48px, 6vw, 72px);
	padding-top: 24px;
	border-top: 1px solid var(--line-dark);
	font-size: 0.8125rem;
}

.site-footer__base ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.site-footer__parent {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.site-footer__parent img {
	width: 72px;
	filter: invert(1) brightness(0.95);
	opacity: 0.85;
}

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

@media (min-width: 1080px) {
	.site-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}

	.site-footer__brand {
		grid-column: auto;
	}
}

/* Home hero --------------------------------------------------------------- */

.hero {
	position: relative;
	padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 6vw, 80px) 0;
}

.hero__inner {
	display: grid;
	gap: clamp(44px, 6vw, 64px);
	align-items: center;
}

.hero__copy {
	max-width: 620px;
}

.hero h1 {
	margin: 0 0 24px 0;
}

.hero .lead {
	max-width: 560px;
	color: var(--muted);
}

.hero .btn-row {
	margin: 32px 0 32px 0;
}

@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* The phones stand in front of a photograph from the app, the front one
   overlapping its lower edge. */
.hero__stage {
	position: relative;
	width: 100%;
	max-width: 560px;
	height: clamp(500px, 136vw, 660px);
	margin-inline: auto;
	isolation: isolate;
}

.hero__photo {
	position: absolute;
	z-index: -1;
	inset: 0 0 auto 0;
	width: 100%;
	height: 86%;
	object-fit: cover;
	border-radius: 28px;
	box-shadow: var(--shadow);
}

.hero__stage .device {
	position: absolute;
	bottom: 0;
}

.hero__stage .device--front {
	--device-w: clamp(196px, 50vw, 262px);
	right: 9%;
}

.hero__stage .device--back {
	--device-w: clamp(160px, 41vw, 214px);
	left: 7%;
	bottom: 10%;
	transform: rotate(-4deg);
}

.hero__notify {
	top: 9%;
	left: -5%;
}

@media (max-width: 1023px) {
	.hero__notify {
		left: 3%;
	}
}

/* The film sits across the line where the page turns dark. */
.film-band {
	background: linear-gradient(to bottom, var(--paper) 0, var(--paper) 50%, var(--ink) 50%, var(--ink) 100%);
}

.film-band + .statement {
	padding-top: clamp(64px, 8vw, 112px);
}

/* Statement band ---------------------------------------------------------- */

.statement {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.statement::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: -40%;
	width: 900px;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(197, 152, 51, 0.22), rgba(197, 152, 51, 0));
}

.statement__text {
	max-width: 900px;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
	line-height: 1.18;
	color: var(--on-dark);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.statement__text em {
	font-style: normal;
	color: var(--gold-bright);
}

.statement__body {
	display: grid;
	gap: 28px;
	margin-top: clamp(32px, 4vw, 48px);
}

@media (min-width: 900px) {
	.statement__body {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		align-items: start;
	}
}

.statement__body p {
	max-width: 520px;
	font-size: 1.0625rem;
}

/* With a photograph: on the right on wide screens, below the words on
   narrow ones, fading into the ink either way. */
.statement--photo {
	padding-bottom: calc(var(--section) + 56vw);
}

.statement--photo::after {
	display: none;
}

.statement__photo {
	position: absolute;
	z-index: -1;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 72vw;
	object-fit: cover;
	object-position: 50% 35%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 50%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 50%);
}

.statement__col {
	max-width: 600px;
}

.statement__col > p {
	margin-top: 28px;
	font-size: 1.0625rem;
}

.statement__col .verse {
	margin-top: 36px;
}

.statement__action {
	margin-top: 36px;
}

@media (min-width: 1024px) {
	.statement--photo {
		padding-bottom: var(--section);
	}

	.statement__photo {
		left: auto;
		right: 0;
		top: 0;
		width: 60%;
		height: 100%;
		object-position: 40% 50%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
		mask-image: linear-gradient(to right, transparent 0%, #000 45%);
	}

	.statement__col {
		max-width: 540px;
	}
}

/* Scripture --------------------------------------------------------------- */

.verse {
	position: relative;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--gold);
}

.verse blockquote {
	font-family: var(--font-serif);
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
	line-height: 1.5;
	font-style: italic;
	color: var(--ink);
}

.verse figcaption {
	margin-top: 12px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--muted);
}

.section--dark .verse blockquote {
	color: var(--on-dark);
}

.section--dark .verse figcaption {
	color: var(--on-dark-muted);
}

.verse--center {
	max-width: 760px;
	margin-inline: auto;
	padding: 0;
	border: 0;
	text-align: center;
}

/* A day with Uplift ------------------------------------------------------- */

.day {
	position: relative;
	display: grid;
	gap: 18px;
	list-style: none;
	counter-reset: day;
}

.day__item {
	position: relative;
	padding: 26px 24px 28px 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background-color: var(--white);
	box-shadow: var(--shadow-sm);
}

.day__item h3 {
	margin: 0 0 10px 0;
	font-size: 1.35rem;
}

.day__item p {
	font-size: 0.9688rem;
	color: var(--muted);
}

.day__item a {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.875rem;
}

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

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

	.day__item {
		z-index: 1;
	}
}

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

.pillar .btn {
	align-self: flex-start;
	margin-top: auto;
}

.card-foot {
	margin-top: auto;
	padding-top: 24px;
}

/* App tour ---------------------------------------------------------------- */

/* One panel per part of the app. With the script, a row of tabs shows one
   at a time; without it, the panels simply follow one another. */
.tour__tabs {
	display: flex;
	gap: 4px;
	width: max-content;
	max-width: 100%;
	margin: 0 auto clamp(36px, 5vw, 56px) auto;
	padding: 6px;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 999px;
	background-color: var(--white);
	box-shadow: var(--shadow-sm);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tour__tabs::-webkit-scrollbar {
	display: none;
}

.tour__tabs[hidden] {
	display: none;
}

.tour__tabs button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px 10px 14px;
	border: 0;
	border-radius: 999px;
	background-color: transparent;
	color: var(--muted);
	font-size: 0.9063rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.tour__tabs button:hover {
	color: var(--ink);
	background-color: var(--paper-2);
}

.tour__tabs button[aria-selected="true"] {
	background-color: var(--ink);
	color: var(--on-dark);
}

.tour__tabs svg {
	width: 20px;
	height: 20px;
	color: var(--gold);
}

.tour__tabs button[aria-selected="true"] svg {
	color: var(--gold-bright);
}

.tour__panels {
	display: grid;
	gap: clamp(72px, 9vw, 112px);
}

.tour__panel {
	display: grid;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.tour__panel[hidden] {
	display: none;
}

.tour__panel.is-entering {
	animation: tour-in 380ms ease both;
}

@keyframes tour-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

@media (min-width: 900px) {
	.tour__panel {
		grid-template-columns: 1fr 1fr;
	}
}

/* The phone in front of a photograph from the app. */
.tour__media {
	position: relative;
	display: flex;
	justify-content: center;
	padding: clamp(28px, 5vw, 48px) 0;
	isolation: isolate;
}

.tour__photo {
	position: absolute;
	z-index: -1;
	top: 15%;
	left: 0;
	width: 100%;
	height: 70%;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.tour__media .device {
	--device-w: clamp(210px, 58vw, 272px);
}

.tour__copy h3 {
	margin: 0 0 18px 0;
	font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.6rem);
	line-height: 1.1;
}

.tour__copy > p {
	font-size: 1.0625rem;
	color: var(--muted);
}

.tour__copy .ticks {
	margin: 26px 0 32px 0;
}

/* A list of features, each ticked off. */
.ticks {
	display: grid;
	gap: 12px;
	list-style: none;
}

.ticks li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.ticks svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	padding: 4px;
	border-radius: 50%;
	background-color: var(--gold-soft);
	color: var(--gold-ink);
}

/* Trust: a photographed statement beside four commitments --------------- */

.trust__inner {
	display: grid;
	gap: clamp(36px, 5vw, 64px);
}

@media (min-width: 1024px) {
	.trust__inner {
		grid-template-columns: 0.95fr 1.05fr;
		align-items: center;
	}
}

.trust__feature {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(440px, 110vw, 620px);
	padding: clamp(28px, 4vw, 48px);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--ink);
	color: var(--on-dark-muted);
	isolation: isolate;
	box-shadow: var(--shadow-lg);
}

.trust__photo {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 20%;
}

.trust__feature::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 38, 49, 0) 20%, rgba(27, 38, 49, 0.82) 58%, var(--ink) 100%);
}

.trust__statement h2 {
	margin: 0 0 18px 0;
	font-size: clamp(2rem, 1.45rem + 2vw, 3rem);
	color: var(--on-dark);
}

.trust__statement p {
	max-width: 460px;
	margin: 0 0 28px 0;
	font-size: 1.0625rem;
}

.trust__list {
	display: grid;
	list-style: none;
}

.trust__list li {
	display: flex;
	gap: 20px;
	padding: 28px 0;
	border-bottom: 1px solid var(--line);
}

.trust__list li:first-child {
	padding-top: 0;
}

.trust__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.trust__list h3 {
	margin: 0 0 8px 0;
	font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
}

.trust__list p {
	margin: 0 0 16px 0;
	font-size: 0.9688rem;
	color: var(--muted);
}

/* An icon in a small raised tile. */
.icon-badge {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background-color: var(--white);
	box-shadow: var(--shadow-sm);
	color: var(--gold-ink);
}

.icon-badge svg {
	width: 26px;
	height: 26px;
}

@media (prefers-reduced-motion: reduce) {
	.tour__panel.is-entering {
		animation: none;
	}
}

/* Feature rows ------------------------------------------------------------ */

.feature {
	padding-block: var(--section);
	overflow: hidden;
}

.feature + .feature {
	border-top: 1px solid var(--line);
}

.feature--paper-2 + .feature,
.feature + .feature--paper-2 {
	border-top: 0;
}

.feature--paper-2 {
	background-color: var(--paper-2);
}

.feature--dark {
	background-color: var(--ink);
	color: var(--on-dark-muted);
}

.feature--dark h2,
.feature--dark h3,
.feature--dark strong {
	color: var(--on-dark);
}

.feature--dark .lead {
	color: var(--on-dark-muted);
}

.feature__inner {
	display: grid;
	gap: clamp(48px, 6vw, 88px);
	align-items: center;
}

.feature__copy {
	max-width: 560px;
}

.feature__copy h2 {
	margin: 0 0 22px 0;
}

.feature__copy .lead + * {
	margin-top: 28px;
}

.feature__media {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	min-width: 0;
}

.feature__media .device {
	--device-w: min(300px, 74vw);
}

.feature__media--pair .device--back {
	--device-w: min(250px, 56vw);
	position: relative;
	z-index: 1;
	margin-right: -70px;
	transform: translateY(-24px) rotate(-3deg);
}

.feature__media--pair .device--front {
	--device-w: min(270px, 60vw);
	position: relative;
	z-index: 2;
	transform: translateY(24px) rotate(2deg);
}

@media (min-width: 960px) {
	.feature__inner {
		grid-template-columns: 1fr 1fr;
	}

	.feature--flip .feature__copy {
		order: 2;
	}

	.feature--flip .feature__media {
		order: 1;
	}
}

.feature__note {
	margin-top: 26px;
	padding: 16px 18px;
	border-radius: var(--radius);
	background-color: rgba(197, 152, 51, 0.1);
	font-size: 0.9rem;
	color: var(--text);
}

.feature--dark .feature__note {
	background-color: rgba(233, 196, 106, 0.1);
	color: var(--on-dark-muted);
}

.feature__note strong {
	color: var(--ink);
}

.feature--dark .feature__note strong {
	color: var(--on-dark);
}

/* Lists ------------------------------------------------------------------ */

.points {
	display: grid;
	gap: 14px;
	padding-left: 1.15em;
	list-style: disc;
}

.points li::marker {
	color: currentColor;
}

.points li {
	padding-left: 4px;
}

.points strong {
	color: var(--ink);
	font-weight: 700;
}

.section--dark .points strong,
.feature--dark .points strong,
.share-promo .points strong,
.price-card .points strong {
	color: var(--on-dark);
}

.points--x {
	list-style: none;
	padding-left: 0;
}

.points--x li {
	padding-left: 0;
}

/* Pillars / convictions --------------------------------------------------- */

.pillar {
	display: flex;
	flex-direction: column;
	padding: 30px 28px;
	border-radius: var(--radius-lg);
	background-color: var(--white);
	border: 1px solid var(--line);
}

.pillar h3 {
	margin: 0 0 12px 0;
}

.pillar p {
	font-size: 0.9688rem;
	color: var(--muted);
}

.pillar p + p {
	margin-top: 12px;
}

.pillar a {
	font-weight: 600;
	color: var(--ink);
}

.section--dark .pillar {
	background-color: rgba(248, 245, 239, 0.04);
	border-color: var(--line-dark);
}

.section--dark .pillar p {
	color: var(--on-dark-muted);
}

.section--dark .pillar a {
	color: var(--on-dark);
}

/* "Is / isn't" contrast --------------------------------------------------- */

.contrast {
	display: grid;
	gap: 20px;
}

.contrast__col {
	padding: clamp(28px, 4vw, 40px);
	border-radius: var(--radius-lg);
	background-color: var(--white);
	border: 1px solid var(--line);
}

.contrast__col--muted {
	background-color: transparent;
	border-style: dashed;
}

.contrast__col h3 {
	margin: 0 0 22px 0;
}

@media (min-width: 860px) {
	.contrast {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}

/* Pricing ----------------------------------------------------------------- */

.pricing {
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}

@media (min-width: 960px) {
	.pricing {
		grid-template-columns: 0.95fr 1.05fr;
	}
}

.price-card {
	position: relative;
	padding: clamp(30px, 4vw, 44px);
	border-radius: 28px;
	background-color: var(--ink);
	color: var(--on-dark-muted);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	isolation: isolate;
}

.price-card::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -45%;
	right: -35%;
	width: 520px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(233, 196, 106, 0.28), rgba(233, 196, 106, 0));
}

.price-card h2,
.price-card h3 {
	color: var(--on-dark);
}

.price-card__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 6px 0 4px 0;
	font-family: var(--font-display);
	color: var(--on-dark);
}

.price-card__price strong {
	font-size: clamp(3.25rem, 2.5rem + 3vw, 4.5rem);
	font-weight: 500;
	line-height: 1;
}

.price-card__price span {
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--on-dark-muted);
}

.price-card__daily {
	margin: 0 0 26px 0;
	font-size: 0.9375rem;
	color: var(--gold-bright);
}

.price-card .points {
	margin: 26px 0 30px 0;
	gap: 12px;
	font-size: 0.9688rem;
}



.price-card__small {
	margin-top: 18px;
	font-size: 0.8125rem;
	color: var(--on-dark-muted);
}

.value-list {
	display: grid;
	gap: 14px;
	list-style: none;
}

.value-list li {
	display: block;
	padding: 20px 22px;
	border-radius: var(--radius);
	background-color: var(--white);
	border: 1px solid var(--line);
}

.value-list h3 {
	font-size: 1.15rem;
	margin: 2px 0 6px 0;
}

.value-list p {
	font-size: 0.9375rem;
	color: var(--muted);
}

/* Testimonials, over a photograph ----------------------------------------- */

.voices {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.voices__photo {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
}

.voices::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 38, 49, 0.92) 0%, rgba(27, 38, 49, 0.6) 55%, rgba(27, 38, 49, 0.85) 100%);
}

.voices__grid {
	display: grid;
	gap: clamp(16px, 2.2vw, 28px);
}

@media (min-width: 900px) {
	.voices__grid {
		grid-template-columns: 1.35fr 1fr 1fr;
	}
}

.voice-quote {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3vw, 36px);
	border: 1px solid rgba(248, 245, 239, 0.16);
	border-radius: var(--radius-lg);
	background-color: rgba(27, 38, 49, 0.6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.voice-quote::before {
	content: '\201C';
	height: 0.55em;
	margin-bottom: 18px;
	font-family: var(--font-serif);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--gold-bright);
}

.voice-quote blockquote {
	font-family: var(--font-serif);
	font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--on-dark);
}

.voice-quote--lead blockquote {
	font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
	line-height: 1.42;
}

.voice-quote figcaption {
	margin-top: auto;
	padding-top: 26px;
	font-size: 0.9375rem;
	color: var(--on-dark-muted);
}

.voice-quote figcaption strong {
	display: block;
	color: var(--on-dark);
}

/* Home pricing band ------------------------------------------------------- */

.price-band {
	position: relative;
	overflow: hidden;
	background-color: var(--ink);
	color: var(--on-dark-muted);
	isolation: isolate;
}

.price-band::before {
	content: '';
	position: absolute;
	z-index: -1;
	right: -12%;
	top: 50%;
	width: 980px;
	aspect-ratio: 1;
	transform: translateY(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(233, 196, 106, 0.30), rgba(233, 196, 106, 0.08) 60%, rgba(233, 196, 106, 0));
}

.price-band__inner {
	display: grid;
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}

@media (min-width: 960px) {
	.price-band__inner {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.price-band h2 {
	color: var(--on-dark);
}

.price-band .lead {
	margin-top: 20px;
	color: var(--on-dark-muted);
}

.price-band__why {
	max-width: 560px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--line-dark);
	font-size: 0.9688rem;
}

.price-tag {
	position: relative;
	padding: clamp(30px, 4vw, 44px);
	border-radius: 28px;
	background: linear-gradient(170deg, #FFFDF8 0%, var(--paper) 55%, #F3E7CC 100%);
	color: var(--text);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

.price-tag h3 {
	font-size: 1.5rem;
}

.price-tag__amount {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 10px;
}

.price-tag__amount strong {
	font-family: var(--font-display);
	font-size: clamp(3.5rem, 2.6rem + 3vw, 4.75rem);
	font-weight: 500;
	line-height: 1;
	color: var(--ink);
}

.price-tag__amount span {
	font-size: 1rem;
	font-weight: 500;
	color: var(--muted);
}

.price-tag__note {
	margin-top: 8px;
	font-weight: 600;
	color: var(--gold-ink);
}

.price-tag__intro {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 0.9688rem;
	font-weight: 600;
	color: var(--ink);
}

.price-tag__list {
	display: grid;
	gap: 10px;
	margin: 14px 0 30px 0;
	padding: 0 0 0 1.1em;
	font-size: 0.9688rem;
}

.price-tag__small {
	margin-top: 16px;
	font-size: 0.8125rem;
	color: var(--muted);
}

.price-tag__small a {
	color: var(--ink);
	font-weight: 600;
}

/* Promo video: a poster and a play button until someone asks for the player */

.video {
	position: relative;
	max-width: 1040px;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--ink);
	box-shadow: var(--shadow-lg);
}

.video iframe,
.video__play,
.video__play img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video__play {
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.video__play img {
	object-fit: cover;
	transition: transform 600ms ease, filter 300ms ease;
}

.video__play:hover img {
	transform: scale(1.02);
	filter: brightness(0.92);
}

.video__button {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84'%3E%3Cpath d='M34 27l24 15-24 15z' fill='%23FFFFFF'/%3E%3C/svg%3E") center / 84px no-repeat;
	box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
	transition: transform 200ms ease;
}

.video__play:hover .video__button {
	transform: scale(1.06);
}

/* Perspectives cards ------------------------------------------------------ */

.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px;
	border-radius: var(--radius-lg);
	background-color: var(--white);
	border: 1px solid var(--line);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.post-card h3 {
	margin: 0 0 12px 0;
	font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
}

.post-card h3 a {
	text-decoration: none;
}

.post-card h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.post-card p {
	color: var(--muted);
	font-size: 0.9688rem;
}

.post-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 24px;
}

.post-card .post-card__meta {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--muted);
}

/* The button is the visible way in; the title link covers the whole card. */
.post-card .btn,
.question-card .btn {
	position: relative;
	pointer-events: none;
}

.post-card:hover .btn--ghost,
.question-card:hover .btn--ghost {
	--btn-border: var(--ink);
	--btn-bg: var(--ink);
	--btn-fg: var(--on-dark);
}

.post-card--feature:hover .btn--gold {
	--btn-bg: #B8892A;
	--btn-border: #B8892A;
}

.post-card--feature {
	padding: clamp(32px, 5vw, 56px);
	background-color: var(--ink);
	border-color: var(--ink);
	color: var(--on-dark-muted);
	overflow: hidden;
	isolation: isolate;
}

.post-card--feature::before {
	content: '';
	position: absolute;
	z-index: -1;
	right: -20%;
	bottom: -60%;
	width: 700px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(233, 196, 106, 0.24), rgba(233, 196, 106, 0));
}

.post-card--feature h3 {
	max-width: 760px;
	color: var(--on-dark);
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.75rem);
	line-height: 1.1;
}

.post-card--feature p {
	max-width: 640px;
	color: var(--on-dark-muted);
	font-size: 1.0625rem;
}

.post-card--feature .post-card__meta {
	color: var(--on-dark-muted);
}

/* With a photograph across the top. */
.post-card--photo {
	padding-top: 0;
	overflow: hidden;
}

.post-card__photo {
	display: block;
	width: calc(100% + 56px);
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0 -28px 26px -28px;
	object-fit: cover;
	transition: transform 600ms ease;
}

.post-card--photo:hover .post-card__photo {
	transform: scale(1.03);
}

.post-grid {
	display: grid;
	gap: clamp(16px, 2.2vw, 28px);
}

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

	.post-grid .post-card--feature {
		grid-column: 1 / -1;
	}
}

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

/* In the media ------------------------------------------------------------ */

.media-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 18px;
	border-radius: 12px;
	background-color: var(--gold-soft);
	color: var(--gold-ink);
}

.media-card__icon svg {
	width: 22px;
	height: 22px;
}

.media-card--feature .media-card__icon {
	width: 52px;
	height: 52px;
	background-color: rgba(233, 196, 106, 0.16);
	color: var(--gold-bright);
}

.media-card--feature .media-card__icon svg {
	width: 26px;
	height: 26px;
}

.post-card .media-card__meta {
	margin: -4px 0 12px 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gold-ink);
}

.post-card--feature .media-card__meta {
	color: var(--gold-bright);
}

/* The homepage's row of press, under the testimonials. */
.press {
	margin-top: clamp(44px, 5vw, 64px);
	padding-top: clamp(28px, 4vw, 40px);
	border-top: 1px solid var(--line-dark);
}

.press__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}

.press__head h3 {
	font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
}

.press__list {
	display: grid;
	gap: 14px;
	list-style: none;
}

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

.press__list a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 18px 18px 16px 18px;
	border: 1px solid rgba(248, 245, 239, 0.16);
	border-radius: var(--radius);
	background-color: rgba(27, 38, 49, 0.6);
	color: var(--on-dark-muted);
	text-decoration: none;
	transition: border-color 200ms ease, transform 200ms ease;
}

.press__list a:hover {
	border-color: rgba(233, 196, 106, 0.6);
	transform: translateY(-2px);
}

.press__list svg {
	width: 22px;
	height: 22px;
	margin-bottom: 8px;
	color: var(--gold-bright);
}

.press__list strong {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--on-dark);
}

.press__list span {
	font-size: 0.8125rem;
}

/* FAQ --------------------------------------------------------------------- */

.faq {
	max-width: 860px;
	margin-inline: auto;
	border-top: 1px solid var(--line);
}

.faq details {
	border-bottom: 1px solid var(--line);
}

.faq summary {
	position: relative;
	display: block;
	padding: 24px 56px 24px 0;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
	line-height: 1.3;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}

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

.faq summary::after {
	content: '';
	position: absolute;
	right: 4px;
	top: 50%;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16h12M16 10v12' fill='none' stroke='%231B2631' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 32px no-repeat;
	transition: transform 200ms ease, background-color 200ms ease;
}

.faq details[open] summary::after {
	transform: rotate(45deg);
	background-color: var(--gold-soft);
}

.faq .faq__answer {
	padding: 0 0 26px 0;
	max-width: 720px;
	color: var(--muted);
}

.faq .faq__answer p + p {
	margin-top: 12px;
}

.faq .faq__answer a {
	color: var(--ink);
	font-weight: 600;
}

.faq-group + .faq-group {
	padding-top: 0;
}

.faq-group__title {
	max-width: 860px;
	margin: 0 auto 8px auto;
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

/* The home page's questions, beside their heading. */
.faq-split__inner {
	display: grid;
	gap: 36px;
}

.faq-split__head h2 {
	margin: 0 0 18px 0;
}

.faq-split__head .lead {
	margin: 0 0 28px 0;
}

.faq-split .faq {
	max-width: none;
	margin: 0;
}

@media (min-width: 1024px) {
	.faq-split__inner {
		grid-template-columns: 0.8fr 1.2fr;
		gap: 72px;
		align-items: start;
	}

	.faq-split__head {
		position: sticky;
		top: calc(var(--header-h) + 32px);
	}
}

/* CTA band ---------------------------------------------------------------- */

.cta-band {
	position: relative;
	overflow: hidden;
	padding-block: clamp(72px, 9vw, 120px);
	background:
		linear-gradient(rgba(35, 47, 58, 0.9), rgba(35, 47, 58, 0.9)),
		url("/assets/images/photos/meadow-sunset.webp") center 40% / cover no-repeat,
		var(--ink-2);
	color: var(--on-dark-muted);
	isolation: isolate;
}

@media (min-width: 900px) {
	.cta-band {
		background:
			linear-gradient(90deg, var(--ink-2) 0%, rgba(35, 47, 58, 0.94) 38%, rgba(35, 47, 58, 0.45) 100%),
			url("/assets/images/photos/meadow-sunset.webp") right 40% / cover no-repeat,
			var(--ink-2);
	}
}

.cta-band::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: -10%;
	top: -60%;
	width: 900px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(233, 196, 106, 0.22), rgba(233, 196, 106, 0));
}

.cta-band__inner {
	display: grid;
	gap: 40px;
	align-items: center;
}

.cta-band h2 {
	margin: 0 0 18px 0;
	color: var(--on-dark);
}

.cta-band__copy > p {
	max-width: 520px;
	margin: 0 0 30px 0;
	font-size: 1.0625rem;
}

.qr-card {
	display: none;
}

@media (min-width: 900px) {
	.cta-band__inner {
		grid-template-columns: 1fr auto;
	}

	.qr-card {
		display: block;
		width: 210px;
		padding: 22px 22px 18px 22px;
		border-radius: 22px;
		background-color: var(--paper);
		text-align: center;
		box-shadow: var(--shadow-lg);
	}

	.qr-card img {
		width: 136px;
		height: 136px;
		margin: 0 auto;
	}

	.qr-card figcaption {
		margin-top: 14px;
		font-size: 0.8125rem;
		line-height: 1.4;
		font-weight: 600;
		color: var(--ink);
	}
}

/* Interior page hero ------------------------------------------------------ */

.page-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 8vw, 104px) 0 clamp(48px, 7vw, 88px) 0;
	isolation: isolate;
}

.page-hero::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -50%;
	right: -20%;
	width: 900px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(233, 196, 106, 0.3), rgba(248, 245, 239, 0));
}

.page-hero h1 {
	max-width: 940px;
	margin: 0 0 24px 0;
}

.page-hero .lead {
	max-width: 700px;
}

.page-hero--center {
	text-align: center;
}

.page-hero--center h1,
.page-hero--center .lead {
	margin-inline: auto;
}

.page-hero .btn-row {
	margin-top: 32px;
}

.page-hero--center .btn-row {
	justify-content: center;
}

.jump {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
	list-style: none;
}

.page-hero--center .jump {
	justify-content: center;
}

.jump a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background-color: var(--white);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.jump a:hover {
	border-color: var(--gold);
	background-color: var(--gold-soft);
}

/* Search landing pages ---------------------------------------------------- */

.landing-hero__inner {
	display: grid;
	gap: clamp(40px, 6vw, 72px);
	align-items: center;
}

@media (min-width: 960px) {
	.landing-hero__inner {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.landing-hero .device {
	--device-w: min(300px, 76vw);
	margin-inline: auto;
}

.landing-hero .assure {
	margin-top: 24px;
}

.aside-device .device {
	--device-w: 280px;
	margin-inline: auto;
}

@media (max-width: 1099px) {
	.aside-device {
		display: none;
	}
}

/* Breadcrumbs ------------------------------------------------------------- */

.crumbs {
	margin: 0 0 22px 0;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--muted);
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
}

.crumbs li + li::before {
	content: '/';
	margin-right: 6px;
	color: var(--line);
}

.crumbs a {
	color: var(--muted);
	text-decoration: none;
}

.crumbs a:hover {
	color: var(--ink);
	text-decoration: underline;
}

/* Long-form reading ------------------------------------------------------- */

.article-head {
	padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 4vw, 48px) 0;
}

.article-head h1 {
	max-width: 900px;
	margin: 0 0 24px 0;
	font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4rem);
}

.article-head .lead {
	max-width: 720px;
	font-family: var(--font-serif);
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	line-height: 1.5;
	color: var(--muted);
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 0.875rem;
	color: var(--muted);
}

.article-meta strong {
	color: var(--ink);
	font-weight: 600;
}

.prose {
	max-width: 700px;
	font-family: var(--font-serif);
	font-size: 1.1875rem;
	line-height: 1.72;
	color: #2A333C;
	font-optical-sizing: auto;
}

@media (min-width: 1024px) {
	.prose {
		font-size: 1.25rem;
	}
}

.prose > * + * {
	margin-top: 1.15em;
}

.prose h2 {
	margin-top: 2.2em;
	font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
	line-height: 1.15;
}

.prose h3 {
	margin-top: 1.8em;
	font-size: 1.35rem;
}

.prose h2 + *,
.prose h3 + * {
	margin-top: 0.6em;
}

.prose a {
	color: var(--ink);
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
}

.prose a:hover {
	color: var(--gold-ink);
}

.prose strong {
	font-weight: 600;
	color: var(--ink);
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
}

.prose li + li {
	margin-top: 0.45em;
}

.prose li::marker {
	color: var(--gold);
}

.prose blockquote {
	margin-block: 1.7em;
	padding: 0 0 0 1.1em;
	border-left: 2px solid var(--gold);
	font-style: italic;
	color: var(--ink);
}

.prose blockquote cite {
	display: block;
	margin-top: 0.5em;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 500;
	color: var(--muted);
}

.prose .pull {
	margin-block: 1.8em;
	padding: 1.1em 0;
	border-block: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 1.25rem + 0.9vw, 1.85rem);
	line-height: 1.25;
	font-style: normal;
	color: var(--ink);
	text-wrap: balance;
}

.prose hr {
	width: 64px;
	margin: 2.4em auto;
	border: 0;
	border-top: 1px solid var(--line);
}

.prose .note {
	padding: 1.1em 1.3em;
	border-radius: var(--radius);
	background-color: var(--white);
	border: 1px solid var(--line);
	font-family: var(--font-sans);
	font-size: 0.9688rem;
	line-height: 1.65;
	color: var(--text);
}

.prose .note strong:first-child {
	display: block;
	margin-bottom: 4px;
}

.article-layout {
	display: grid;
	gap: 48px;
	padding-bottom: var(--section);
}

@media (min-width: 1100px) {
	.article-layout {
		grid-template-columns: minmax(0, 700px) 1fr;
		gap: 80px;
		align-items: start;
	}
}

.article-aside {
	display: grid;
	gap: 18px;
}

@media (min-width: 1100px) {
	.article-aside {
		position: sticky;
		top: calc(var(--header-h) + 28px);
		max-width: 340px;
	}
}

.aside-card {
	padding: 26px 24px;
	border-radius: var(--radius-lg);
	background-color: var(--white);
	border: 1px solid var(--line);
}

.aside-card h2 {
	margin: 0 0 10px 0;
	font-size: 1.3rem;
}

.aside-card p {
	font-size: 0.9375rem;
	color: var(--muted);
}

.aside-card .btn {
	margin-top: 18px;
}

.aside-card--dark {
	background-color: var(--ink);
	border-color: var(--ink);
	color: var(--on-dark-muted);
}

.aside-card--dark h2 {
	color: var(--on-dark);
}

.aside-card--dark p {
	color: var(--on-dark-muted);
}

.aside-card ul {
	list-style: none;
	display: grid;
	margin-top: 8px;
}

.link-row {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
}

.link-row:last-child {
	padding-bottom: 0;
}

.link-row a {
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	text-decoration: none;
}

.link-row a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.link-row:hover a {
	color: var(--gold-ink);
}

/* The title link covers the row; this just says so. */
.link-row__more {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.3em;
	pointer-events: none;
}

.link-row:hover .link-row__more {
	color: var(--gold-ink);
}

.article-end {
	margin-top: 3em;
	padding: clamp(28px, 4vw, 40px);
	border-radius: var(--radius-lg);
	background-color: var(--paper-2);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
}

.article-end h2 {
	margin: 0 0 12px 0;
	font-size: 1.6rem;
}

.article-end p {
	color: var(--muted);
}

.article-end .btn-row {
	margin-top: 22px;
}

/* Statement of Faith ------------------------------------------------------ */

.articles {
	max-width: 860px;
	list-style: none;
	counter-reset: article;
}

.articles > li {
	display: grid;
	gap: 8px 40px;
	padding: 34px 0;
	border-top: 1px solid var(--line);
	counter-increment: article;
}

.articles > li:last-child {
	border-bottom: 1px solid var(--line);
}

.articles h2 {
	font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
}

.articles__text {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	line-height: 1.7;
	color: #2A333C;
}

.articles__text p + p {
	margin-top: 0.9em;
}

@media (min-width: 860px) {
	.articles > li {
		grid-template-columns: 240px 1fr;
	}
}

.charity {
	max-width: 860px;
	margin-top: clamp(40px, 6vw, 64px);
	padding: clamp(28px, 4vw, 44px);
	border-radius: var(--radius-lg);
	background-color: var(--white);
	border: 1px solid var(--line);
}

.charity h2 {
	margin: 0 0 16px 0;
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

.charity p {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	line-height: 1.7;
	color: #2A333C;
}

/* Simple content pages ---------------------------------------------------- */

.content {
	max-width: 760px;
}

.content > * + * {
	margin-top: 1.1em;
}

.content h2 {
	margin-top: 1.8em;
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

.content h3 {
	margin-top: 1.5em;
	font-size: 1.25rem;
}

.content ol,
.content ul {
	padding-left: 1.3em;
}

.content li + li {
	margin-top: 0.5em;
}

.content a:not(.btn) {
	font-weight: 600;
	color: var(--ink);
	text-decoration-color: var(--gold);
}

.steps {
	display: grid;
	gap: 14px;
	padding: 0 !important;
	list-style: none;
	counter-reset: step;
}

.steps li {
	position: relative;
	margin: 0 !important;
	padding: 18px 20px 18px 66px;
	border-radius: var(--radius);
	background-color: var(--white);
	border: 1px solid var(--line);
	counter-increment: step;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	left: 18px;
	top: 16px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--gold-soft);
	font-weight: 700;
	color: var(--gold-ink);
}

/* Legal documents (privacy policy, terms) keep their own markup; this just
   gives them the site's reading measure and type. */
.legal {
	max-width: 760px;
	padding-bottom: var(--section);
	font-size: 1rem;
	line-height: 1.7;
}

.legal h1 {
	margin: 0 0 12px 0;
	font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.25rem);
}

.legal h2 {
	margin: 2em 0 0.6em 0;
	font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
}

.legal h3 {
	margin: 1.6em 0 0.5em 0;
	font-size: 1.2rem;
}

.legal p,
.legal ul,
.legal ol {
	margin: 1em 0;
}

.legal ul,
.legal ol {
	padding-left: 1.3em;
}

.legal a {
	color: var(--ink);
	font-weight: 600;
	text-decoration-color: var(--gold);
}

/* Download page ----------------------------------------------------------- */

.download {
	display: grid;
	gap: 48px;
	align-items: center;
}

@media (min-width: 900px) {
	.download {
		grid-template-columns: 1fr auto;
	}
}

.download .qr-card {
	display: block;
	width: 240px;
	margin-inline: auto;
	padding: 24px;
	border-radius: 24px;
	background-color: var(--white);
	border: 1px solid var(--line);
	text-align: center;
	box-shadow: var(--shadow);
}

.download .qr-card img {
	width: 170px;
	height: 170px;
	margin: 0 auto;
}

.download .qr-card figcaption {
	margin-top: 14px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
}

/* /go and /share as a page (PHP). Link previews read its share card; a
   person only sees it if the redirect to their store didn't happen. */
.go-card {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 18px;
	max-width: 520px;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 auto;
	padding: 48px var(--gutter);
	text-align: center;
}

.go-card__icon {
	width: 88px;
	height: 88px;
	border-radius: 20px;
	box-shadow: var(--shadow);
}

.go-card h1 {
	font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem);
}

.go-card .store-badges {
	justify-content: center;
}

.go-card__more {
	margin-top: 6px;
}

/* Shared devotionals and daily questions (PHP) ---------------------------- */

.share {
	padding: clamp(28px, 5vw, 64px) 0 var(--section) 0;
}

.share__layout {
	display: grid;
	gap: 40px;
}

@media (min-width: 1100px) {
	.share__layout {
		grid-template-columns: minmax(0, 720px) 1fr;
		gap: 64px;
		align-items: start;
	}
}

.share-card {
	overflow: hidden;
	border-radius: 28px;
	background-color: var(--white);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.share-card__image {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--paper-2);
	background-size: cover;
	background-position: center;
}

.share-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.share-card__body {
	padding: clamp(26px, 5vw, 52px);
}

.share-card h1 {
	margin: 0 0 18px 0;
	font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.25rem);
	line-height: 1.06;
}

.share-card__passage {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 26px 0;
	padding: 8px 14px;
	border-radius: 999px;
	background-color: var(--gold-soft);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--gold-ink);
}

.share-card .prose {
	max-width: none;
}

.share-card .prose a {
	text-decoration: none;
	font-weight: 600;
	color: var(--gold-ink);
}

.share-aside {
	display: grid;
	gap: 18px;
}

@media (min-width: 1100px) {
	.share-aside {
		position: sticky;
		top: calc(var(--header-h) + 28px);
	}
}

.share-promo {
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 4vw, 36px);
	border-radius: var(--radius-lg);
	background-color: var(--ink);
	color: var(--on-dark-muted);
	isolation: isolate;
}

.share-promo::before {
	content: '';
	position: absolute;
	z-index: -1;
	right: -40%;
	top: -40%;
	width: 420px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(233, 196, 106, 0.28), rgba(233, 196, 106, 0));
}

.share-promo h2 {
	margin: 0 0 14px 0;
	font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
	color: var(--on-dark);
}

.share-promo .points {
	margin: 20px 0 26px 0;
	gap: 10px;
	font-size: 0.9375rem;
}

.share-promo .points strong {
	color: var(--on-dark);
}

.share-promo .store-badges {
	margin-top: 16px;
}

.share-promo .qr-inline {
	display: none;
}

@media (min-width: 1100px) {
	.share-promo .qr-inline {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-top: 20px;
		padding: 12px;
		border-radius: 14px;
		background-color: var(--paper);
		color: var(--ink);
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.share-promo .qr-inline img {
		width: 76px;
		height: 76px;
	}
}

.share-promo > p {
	margin: 0 0 4px 0;
	font-size: 0.9688rem;
}

.share-prayer {
	margin-top: 2em !important;
	padding: 1.3em 1.4em;
	border-radius: var(--radius);
	background: linear-gradient(160deg, #FFFFFF 0%, #FBEBDD 100%);
	border: 1px solid #F1D9C4;
}

.share-prayer h2 {
	margin: 0 0 0.4em 0 !important;
	font-size: 1.35rem;
	color: var(--ink);
}

.share-prayer p {
	font-style: italic;
	color: var(--ink);
}

.share-prayer p + p {
	margin-top: 0.8em;
}

.prose .ref {
	font-weight: 600;
	color: var(--gold-ink);
}

.share-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

/* Bible questions index (PHP) */

.question-grid {
	display: grid;
	gap: clamp(16px, 2.2vw, 28px);
	list-style: none;
}

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

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

.question-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--white);
	border: 1px solid var(--line);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.question-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.question-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background-color: var(--paper-2);
}

.question-card {
	display: flex;
	flex-direction: column;
}

.question-card > div {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 26px 24px;
}

.question-card h2 {
	font-size: 1.3rem;
	line-height: 1.25;
}

.question-card h2 a {
	text-decoration: none;
}

.question-card h2 a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.question-card p {
	margin-top: 10px;
	font-size: 0.9375rem;
	color: var(--muted);
}

.question-card .btn {
	align-self: flex-start;
	margin-top: auto;
}

.question-card p {
	margin-bottom: 20px;
}

/* The bar that follows a reader on a phone, so the way in is always a thumb away. */
.app-bar {
	position: fixed;
	z-index: 40;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 14px;
	border-radius: 20px;
	background-color: var(--ink);
	color: var(--on-dark);
	box-shadow: var(--shadow-lg);
	transform: translateY(160%);
	transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app-bar.is-visible {
	transform: none;
}

.app-bar img {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 10px;
}

.app-bar p {
	flex: 1;
	font-size: 0.8125rem;
	line-height: 1.3;
}

.app-bar strong {
	display: block;
	font-size: 0.875rem;
}

.app-bar .btn {
	flex: 0 0 auto;
}

@media (min-width: 1100px) {
	.app-bar {
		display: none;
	}
}

.has-app-bar .site-footer {
	padding-bottom: 110px;
}

@media (min-width: 1100px) {
	.has-app-bar .site-footer {
		padding-bottom: 32px;
	}
}

/* Not found --------------------------------------------------------------- */

.not-found {
	padding-block: clamp(80px, 12vw, 160px);
	text-align: center;
}

.not-found h1 {
	margin: 0 0 20px 0;
}

.not-found .lead {
	max-width: 560px;
	margin-inline: auto;
}

.not-found .btn-row {
	justify-content: center;
	margin-top: 32px;
}

/* Swipe decks: on phones, a row of cards you swipe through instead of a
   long stack. Wider screens keep their grid. */
@media (max-width: 899px) {
	.swipe {
		display: flex;
		gap: 14px;
		margin-inline: calc(var(--gutter) * -1);
		padding: 4px var(--gutter) 16px var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.swipe::-webkit-scrollbar {
		display: none;
	}

	.swipe > * {
		flex: 0 0 min(84%, 360px);
		scroll-snap-align: start;
	}
}

/* Reveal on scroll (only once JS has said it can do it) ------------------- */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   App screens

   Real screenshots of the app (rendered from the app's own templates by
   tools/app-screens) in a phone frame drawn in CSS. The device is a size
   container, so the frame scales with whatever width the layout gives it;
   the frame draws the Dynamic Island and home indicator over the image.
   ========================================================================== */

.device {
	--app-bg: #F2F2F2;
	--app-ink: #161616;
	--app-grey: #5A5A5A;
	--app-slate: #232F3A;
	--app-gold: #C59833;
	--app-clay: #B78A71;
	--app-bronze: #BE896B;
	container-type: inline-size;
	width: var(--device-w, 280px);
	margin: 0;
	flex: 0 0 auto;
	position: relative;
	line-height: 1.4;
	-webkit-user-select: none;
	user-select: none;
}

.device__body {
	position: relative;
	padding: 3.5cqw;
	border-radius: 15cqw;
	background: linear-gradient(145deg, #464C54 0%, #1C1F23 38%, #121417 100%);
	box-shadow:
		inset 0 0 0 0.6cqw rgba(255, 255, 255, 0.14),
		inset 0 0 0 1.4cqw #0A0B0D,
		0 2cqw 4cqw rgba(5, 17, 28, 0.18),
		0 10cqw 22cqw rgba(5, 17, 28, 0.32);
}

.device__body::before,
.device__body::after {
	content: '';
	position: absolute;
	width: 1.1cqw;
	border-radius: 1cqw;
	background: #282C31;
}

.device__body::before {
	left: -0.8cqw;
	top: 40cqw;
	height: 22cqw;
}

.device__body::after {
	right: -0.8cqw;
	top: 52cqw;
	height: 30cqw;
}

.screen {
	--u: calc(93cqw / 390);
	position: relative;
	aspect-ratio: 390 / 844;
	border-radius: 11.5cqw;
	overflow: hidden;
	background-color: var(--app-bg);
	color: var(--app-ink);
	font-family: "Montserrat", "gotham", sans-serif;
	font-size: calc(14 * var(--u));
	line-height: 1.5;
	text-align: left;
	isolation: isolate;
}

/* Dynamic Island and home indicator */
.screen::before {
	content: '';
	position: absolute;
	z-index: 30;
	top: calc(11 * var(--u));
	left: 50%;
	width: calc(122 * var(--u));
	height: calc(35 * var(--u));
	margin-left: calc(-61 * var(--u));
	border-radius: calc(20 * var(--u));
	background-color: #000;
}

.screen::after {
	content: '';
	position: absolute;
	z-index: 30;
	bottom: calc(8 * var(--u));
	left: 50%;
	width: calc(138 * var(--u));
	height: calc(5 * var(--u));
	margin-left: calc(-69 * var(--u));
	border-radius: calc(5 * var(--u));
	background-color: rgba(0, 0, 0, 0.82);
}

/* A real screenshot in the frame: the image fills the screen and the frame
   draws the Dynamic Island and home indicator over it. */
.screen--shot {
	background-color: #F2F2F2;
}

.screen--shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* A card lifted out of the phone, in page units: the tap-a-verse overlay,
   a notification, a saved answer. */
.float-card {
	position: absolute;
	z-index: 5;
	width: min(250px, 64vw);
	padding: 18px 20px 16px 20px;
	border-radius: 18px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(16, 28, 40, 0.08), 0 18px 40px rgba(16, 28, 40, 0.18);
	text-align: left;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: #555;
}

.float-card h3 {
	margin: 0 0 8px 0;
	font-family: var(--font-display);
	font-size: 1.2rem;
	line-height: 1.1;
	color: var(--clay);
}

.float-card sup {
	font-size: 0.7em;
	font-weight: 700;
	color: var(--app-ink, #161616);
	margin: 0 3px 0 0;
}

.float-card small {
	display: block;
	margin: 10px 0 0 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #A0A0A0;
}

.float-card--notify {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	width: min(300px, 76vw);
	padding: 14px 16px;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #222;
}

.float-card--notify img {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 9px;
}

.float-card--notify strong {
	display: flex;
	justify-content: space-between;
	font-size: 0.8125rem;
	color: #111;
}

.float-card--notify strong span {
	font-weight: 400;
	color: #888;
}

.float-card--notify p {
	margin-top: 2px;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.float-card.pos-tl {
	top: 6%;
	left: -2%;
}

.float-card.pos-tr {
	top: 8%;
	right: -2%;
}

.float-card.pos-bl {
	bottom: 8%;
	left: -2%;
}

.float-card.pos-br {
	bottom: 10%;
	right: -2%;
}

.float-card.pos-mr {
	top: 16%;
	right: -3%;
}

.float-card.pos-lower {
	bottom: 19%;
	right: -4%;
}

.float-card.pos-ml {
	top: 46%;
	left: -3%;
}

@media (max-width: 559px) {
	.float-card {
		display: none;
	}
}


/* ==========================================================================
   Phones

   On a phone the site should read like an app, not a poster: a 12px body,
   everything else in proportion to it, a tighter rhythm, one main action per
   screen, chips you swipe and lists that read like grouped table rows. The
   root size drops to 85% (13.6px), so sizes here are in rem of that, and
   sizes elsewhere in rem shrink with it. Nothing here applies from 600px up.
   ========================================================================== */

@media (max-width: 599px) {

	:root {
		--gutter: 18px;
		--section: 48px;
		--header-h: 54px;
		--radius-lg: 18px;
	}

	html {
		font-size: 85%;
	}

	/* 11.9px body; 27px, 20px and 14.5px headings */
	body {
		font-size: 0.875rem;
		line-height: 1.55;
	}

	h1,
	.h1 {
		font-size: 2rem;
		line-height: 1.08;
	}

	h2,
	.h2 {
		font-size: 1.5rem;
		line-height: 1.15;
	}

	h3,
	.h3 {
		font-size: 1.0625rem;
		line-height: 1.3;
	}

	.lead {
		font-size: 0.9375rem;
		line-height: 1.55;
	}

	.section-head {
		margin-bottom: 22px;
	}

	.section-head h2 + p,
	.section-head h2 + .lead {
		margin-top: 10px;
	}

	.section-foot {
		margin-top: 22px;
	}

	/* Buttons */
	.btn {
		gap: 8px;
		min-height: 40px;
		padding: 9px 18px;
		font-size: 0.875rem;
	}

	.btn--lg {
		min-height: 46px;
		padding: 12px 22px;
		font-size: 0.9375rem;
	}

	.btn--sm {
		min-height: 32px;
		padding: 6px 13px;
		font-size: 0.8125rem;
	}

	/* Header and menu */
	.brand img {
		width: 76px;
	}

	.site-header__actions .btn--sm {
		min-height: 32px;
		padding: 5px 13px;
	}

	.mobile-nav a:not(.btn) {
		min-height: 42px;
		font-size: 0.9375rem;
	}

	.mobile-nav__heading {
		font-size: 0.8125rem;
	}

	/* Home hero: one full-width action; the tour is a scroll away. */
	.hero {
		padding: 18px 0 32px 0;
	}

	.hero__inner {
		gap: 24px;
	}

	.hero h1 {
		margin-bottom: 12px;
	}

	.hero .btn-row {
		margin: 18px 0;
	}

	.hero .btn-row .btn--gold {
		flex: 1 1 100%;
	}

	.hero .btn-row .btn--ghost {
		display: none;
	}

	.assure {
		gap: 7px;
		font-size: 0.8125rem;
	}

	.assure li {
		gap: 9px;
	}

	.assure svg {
		width: 16px;
		height: 16px;
	}

	.hero__stage {
		height: 104vw;
	}

	.hero__photo {
		height: 84%;
		border-radius: 18px;
	}

	.hero__stage .device--front {
		--device-w: 41vw;
		right: 9%;
	}

	.hero__stage .device--back {
		--device-w: 34vw;
		left: 9%;
	}

	/* The film and the statement */
	.video {
		border-radius: 14px;
	}

	.video__button {
		width: 56px;
		height: 56px;
		margin: -28px 0 0 -28px;
		background-size: 56px;
	}

	.film-band + .statement {
		padding-top: 40px;
	}

	.statement__text {
		font-size: 1.375rem;
		line-height: 1.2;
	}

	.statement__col > p {
		margin-top: 14px;
		font-size: 0.875rem;
	}

	.statement__col .verse,
	.statement__action {
		margin-top: 20px;
	}

	.statement__body p {
		font-size: 0.875rem;
	}

	.statement--photo {
		padding-bottom: calc(var(--section) + 42vw);
	}

	.statement__photo {
		height: 58vw;
	}

	.verse {
		padding-left: 16px;
	}

	.verse blockquote {
		font-size: 0.9375rem;
	}

	.verse figcaption {
		margin-top: 6px;
		font-size: 0.8125rem;
	}

	/* App tour: the tabs become a row of chips that runs off the edge. */
	.tour__tabs {
		width: auto;
		gap: 7px;
		margin: 0 calc(var(--gutter) * -1) 16px calc(var(--gutter) * -1);
		padding: 2px var(--gutter);
		border: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}

	.tour__tabs button {
		gap: 6px;
		min-height: 32px;
		padding: 6px 12px 6px 10px;
		border: 1px solid var(--line);
		background-color: var(--white);
		font-size: 0.8125rem;
	}

	.tour__tabs button[aria-selected="true"] {
		border-color: var(--ink);
	}

	.tour__tabs svg {
		width: 15px;
		height: 15px;
	}

	.tour__panels {
		gap: 48px;
	}

	.tour__panel {
		gap: 16px;
	}

	.tour__media {
		padding: 14px 0;
	}

	.tour__media .device {
		--device-w: 42vw;
	}

	.tour__copy h3 {
		margin-bottom: 8px;
		font-size: 1.1875rem;
	}

	.tour__copy > p {
		font-size: 0.875rem;
	}

	.tour__copy .ticks {
		margin: 14px 0 18px 0;
	}

	.ticks {
		gap: 8px;
		font-size: 0.8125rem;
	}

	.ticks li {
		gap: 9px;
	}

	.ticks svg {
		width: 17px;
		height: 17px;
		padding: 3px;
	}

	.tour__copy .btn {
		min-height: 32px;
		padding: 6px 13px;
		font-size: 0.8125rem;
	}

	/* Testimonials */
	.swipe {
		gap: 12px;
	}

	.swipe > * {
		flex-basis: 78%;
	}

	.voice-quote {
		padding: 18px;
	}

	.voice-quote::before {
		margin-bottom: 8px;
		font-size: 2.5rem;
	}

	.voice-quote blockquote {
		font-size: 0.9375rem;
	}

	.voice-quote--lead blockquote {
		font-size: 1.0625rem;
	}

	.voice-quote figcaption {
		padding-top: 14px;
		font-size: 0.8125rem;
	}

	/* Trust: the commitments as a grouped list; each row opens its page. */
	.trust__inner {
		gap: 16px;
	}

	.trust__feature {
		min-height: 0;
		padding: 42vw 18px 20px 18px;
	}

	.trust__statement h2 {
		margin-bottom: 8px;
		font-size: 1.375rem;
	}

	.trust__statement p {
		margin-bottom: 16px;
		font-size: 0.875rem;
	}

	.trust__list {
		overflow: hidden;
		border: 1px solid var(--line);
		border-radius: 14px;
		background-color: var(--white);
		box-shadow: var(--shadow-sm);
	}

	.trust__list li,
	.trust__list li:first-child,
	.trust__list li:last-child {
		position: relative;
		gap: 12px;
		padding: 13px 36px 13px 14px;
		border-bottom: 1px solid var(--line);
	}

	.trust__list li:last-child {
		border-bottom: 0;
	}

	.trust__list li::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 16px;
		width: 7px;
		height: 7px;
		border-top: 1.5px solid #BFB5A4;
		border-right: 1.5px solid #BFB5A4;
		transform: translateY(-50%) rotate(45deg);
		pointer-events: none;
	}

	.trust__list h3 {
		margin-bottom: 3px;
		font-size: 0.9375rem;
	}

	.trust__list p {
		margin: 0;
		font-size: 0.8125rem;
		line-height: 1.5;
	}

	/* The row's button covers the whole row; its text stays its name. */
	.trust__list .btn {
		position: absolute;
		inset: 0;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: transparent;
		font-size: 0;
		transform: none;
	}

	.trust__list .btn:focus-visible {
		outline-offset: -3px;
	}

	.icon-badge {
		width: 32px;
		height: 32px;
		border: 0;
		border-radius: 9px;
		background-color: var(--gold-soft);
		box-shadow: none;
	}

	.icon-badge svg {
		width: 18px;
		height: 18px;
	}

	/* Price */
	.price-band__inner {
		gap: 24px;
	}

	.price-band .lead {
		font-size: 0.9375rem;
	}

	.price-band__why {
		font-size: 0.8125rem;
	}

	.price-tag {
		padding: 20px;
		border-radius: 18px;
	}

	.price-tag h3 {
		font-size: 1.0625rem;
	}

	.price-tag__amount strong {
		font-size: 2.375rem;
	}

	.price-tag__amount span,
	.price-tag__note {
		font-size: 0.8125rem;
	}

	.price-tag__intro {
		margin-top: 16px;
		padding-top: 14px;
		font-size: 0.8125rem;
	}

	.price-tag__list {
		gap: 6px;
		margin: 8px 0 20px 0;
		font-size: 0.8125rem;
	}

	/* Essay cards */
	.post-card {
		padding: 18px 16px;
	}

	.post-card--photo {
		padding-top: 0;
	}

	.post-card__photo {
		width: calc(100% + 32px);
		margin: 0 -16px 14px -16px;
	}

	.post-card h3 {
		margin-bottom: 6px;
		font-size: 1rem;
	}

	.post-card p {
		font-size: 0.8125rem;
	}

	.post-card__foot {
		padding-top: 14px;
	}

	.post-card--feature h3 {
		font-size: 1.25rem;
	}

	.post-card--feature p {
		font-size: 0.875rem;
	}

	/* Questions */
	.faq-split__inner {
		gap: 18px;
	}

	.faq-split__head h2 {
		margin-bottom: 8px;
	}

	.faq-split__head .lead {
		margin-bottom: 14px;
	}

	.faq summary {
		padding: 13px 40px 13px 0;
		font-size: 0.9375rem;
	}

	.faq summary::after {
		width: 24px;
		height: 24px;
		margin-top: -12px;
		background-size: 24px;
	}

	.faq .faq__answer {
		padding-bottom: 16px;
		font-size: 0.875rem;
	}

	.faq-group__title {
		font-size: 1.125rem;
	}

	/* Download band and footer */
	.cta-band {
		padding-block: 44px;
	}

	.cta-band h2 {
		margin-bottom: 8px;
	}

	.cta-band__copy > p {
		margin-bottom: 18px;
		font-size: 0.875rem;
	}

	.store-badges {
		gap: 10px;
	}

	.store-badges img {
		height: 36px;
	}

	.site-footer {
		padding: 40px 0 26px 0;
		font-size: 0.8125rem;
	}

	.site-footer__grid {
		gap: 26px 18px;
	}

	.site-footer__brand img {
		width: 84px;
		margin-bottom: 10px;
	}

	.site-footer h2 {
		margin-bottom: 8px;
		font-size: 0.8125rem;
	}

	.site-footer nav li + li {
		margin-top: 6px;
	}

	.socials a {
		width: 34px;
		height: 34px;
	}

	/* Other pages */
	.page-hero {
		padding: 26px 0 30px 0;
	}

	.page-hero h1 {
		margin-bottom: 12px;
	}

	.page-hero .btn-row {
		margin-top: 18px;
	}

	/* Hero actions fill the width, the main one first. */
	.page-hero .btn-row .btn,
	.landing-hero .btn-row .btn {
		flex: 1 1 100%;
	}

	/* Jump links run in one row of chips you swipe, off the edge. */
	.jump,
	.page-hero--center .jump {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 7px;
		margin: 20px calc(var(--gutter) * -1) 0 calc(var(--gutter) * -1);
		padding: 2px var(--gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.jump::-webkit-scrollbar {
		display: none;
	}

	.jump li {
		flex: 0 0 auto;
	}

	.jump a {
		padding: 6px 12px;
		font-size: 0.8125rem;
		white-space: nowrap;
	}

	.feature__inner {
		gap: 28px;
	}

	.feature__copy h2 {
		margin-bottom: 12px;
	}

	.feature__copy .lead + * {
		margin-top: 18px;
	}

	.feature__media .device {
		--device-w: 52vw;
	}

	.feature__media--pair .device--back {
		--device-w: 40vw;
		margin-right: -44px;
	}

	.feature__media--pair .device--front {
		--device-w: 44vw;
	}

	.landing-hero .device {
		--device-w: 54vw;
	}

	.points {
		gap: 10px;
	}

	.pillar,
	.price-card {
		padding: 20px 18px;
	}

	.pillar p,
	.value-list p {
		font-size: 0.8125rem;
	}

	.value-list h3 {
		font-size: 1rem;
	}

	.day__item {
		padding: 18px;
	}

	.day__item h3 {
		font-size: 1.0625rem;
	}

	.day__item p {
		font-size: 0.8125rem;
	}

	.article-head {
		padding: 24px 0 20px 0;
	}

	.article-head h1 {
		font-size: 1.75rem;
	}

	.article-head .lead {
		font-size: 0.9375rem;
	}

	.prose {
		font-size: 0.9375rem;
		line-height: 1.65;
	}

	.prose h2 {
		font-size: 1.25rem;
	}

	.prose h3 {
		font-size: 1.0625rem;
	}

	.prose .pull {
		font-size: 1.125rem;
	}

	.articles > li {
		padding: 20px 0;
	}

	.articles h2 {
		font-size: 1.0625rem;
	}

	.articles__text {
		font-size: 0.875rem;
	}

	.aside-card h2 {
		font-size: 1.0625rem;
	}

	.article-end h2 {
		font-size: 1.25rem;
	}

	.charity h2,
	.content h2,
	.legal h2 {
		font-size: 1.1875rem;
	}

	.charity p {
		font-size: 0.875rem;
	}

	.content h3,
	.legal h3 {
		font-size: 1rem;
	}

	.legal h1,
	.share-card h1 {
		font-size: 1.75rem;
	}

	.share-promo h2 {
		font-size: 1.25rem;
	}

	.share-prayer h2,
	.question-card h2 {
		font-size: 1.0625rem;
	}

	/* In the media */
	.media-card__icon {
		width: 34px;
		height: 34px;
		margin-bottom: 12px;
		border-radius: 10px;
	}

	.media-card__icon svg,
	.media-card--feature .media-card__icon svg {
		width: 18px;
		height: 18px;
	}

	.media-card--feature .media-card__icon {
		width: 40px;
		height: 40px;
	}

	.post-card .media-card__meta {
		margin-bottom: 8px;
		font-size: 0.8125rem;
	}

	.press {
		margin-top: 32px;
		padding-top: 24px;
	}

	.press__head {
		margin-bottom: 14px;
	}

	.press__head h3 {
		font-size: 1.0625rem;
	}

	.press__list a {
		padding: 14px;
		border-radius: 14px;
	}

	.press__list svg {
		width: 18px;
		height: 18px;
		margin-bottom: 4px;
	}

	.press__list strong {
		font-size: 1rem;
	}
}