/* =================================================================
   FOUNDATIONS
   ================================================================= */

/* ---------- Base & reset ---------- */
html, body {
	margin: 0;
	padding: 0;
	background: #f1ede6;
	color: #2c2a45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-optical-sizing: auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-wrap: pretty;
}
/* ---------- Typography ---------- */
/* New York Heavy (Small optical size) — applied wherever the serif appears */
h1,
h2,
.feature figcaption {
	font-family: ui-serif, Georgia, "Times New Roman", serif;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 11;
	font-weight: 900;
	color: #2c2a45;
}

/* ---------- Helpers ---------- */
.mt-0 {
	margin-top: 0 !important;
}
.mt-1 {
	margin-top: 8px;
}
.mt-2 {
	margin-top: 16px;
}
.justify-center {
	justify-content: center;
}

/* ---------- Layout shell ---------- */
main {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 64px;
	box-sizing: border-box;
}
body.home main {
	align-items: center;
	text-align: center;
}
@media (max-width: 600px) {
	main { padding: 0 24px; }
}

/* ---------- Buttons (CTA pill) — shared across nav, hero, FAQ ---------- */
.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #5b54a1;
	color: #ffffff;
	width: fit-content;
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	padding: 23px 35px 26px;
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.2s ease;
}
.cta:hover {
	background: #8176EF;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
	transform: translateY(-4px) scale(1.04) rotate(.5deg);
}
.cta.fit {
	width: fit-content !important;
}
.cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
}
.cta.secondary {
	background: #fff;
	color: #2c2a45;
}
.cta.secondary:hover {
	background: #fff;
	box-shadow: 0 0 0 2px #fff, 0 10px 40px rgba(0, 0, 0, 0.10);
}
.cta.tertiary {
	background: rgba(255,255,255,0.6);
	color: #2c2a45;
}
.cta.tertiary:hover {
	background: rgba(255,255,255,0.9);
	box-shadow: none;
}
@media (max-width: 700px) {
	.cta {
		width: 100%;
	}
	.cta-row { gap: 16px; }
}
@media (max-width: 600px) {
	.cta { font-size: 19px; padding: 18px 36px; }
}


/* =================================================================
   PAGE FLOW
   ================================================================= */

/* ---------- Navigation & brand marks ---------- */
/* Top navigation (home) */
.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 40px;
	box-sizing: border-box;
}
.nav-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.nav-wordmark {
	font-family: ui-serif, Georgia, "Times New Roman", serif;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 11;
	font-weight: 900;
	font-size: 30px;
	line-height: 1;
	color: #2c2a45;
}
/* Wordmark as a home link on the sub-pages (support / privacy / philosophy) */
.nav-home {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.nav-right {
	display: flex;
	align-items: center;
	gap: 20px;
}
.nav-links {
	display: flex;
	align-items: center;
	margin-right: 210px;
}
.nav-links a {
	font-size: 20px;
	font-weight: 590;
	color: #2c2a45;
	border-radius: 100px;
	padding: 10px 17px 12px;
	text-decoration: none;
	transition: all 0.2s ease;
}
.nav-links a:hover {
	background: #fff;
	transform: translateY(-4px);
}
.cta.nav-download {
	position: fixed;
	right: 18px;
	font-size: 20px;
	padding: 18px 28px 20px;
	z-index: 99;
}

/* Interactive Dwellum mark (bookmark + spinnable dial) — the nav logo */
.dwellum-mark {
	position: relative;
	display: block;
	width: 84px;
	margin-bottom: 28px;
	cursor: pointer;
	filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.05));
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: all 0.2s ease, filter 0.2s ease;
}
.dwellum-mark:hover {
	transform: translateY(-6px) rotate(3deg);
	filter: drop-shadow(0 28px 24px rgba(0, 0, 0, 0.08));
}
.dwellum-mark.is-pressed {
	animation: mark-press 0.45s ease-out;
}
@keyframes mark-press {
	0%   { scale: 1; }
	35%  { scale: 0.92; }
	62%  { scale: 1.04; }
	100% { scale: 1; }
}
.dwellum-mark .bookmark {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
}
.dwellum-mark .dial {
	position: absolute;
	top: 15.93%;
	left: 21.08%;
	width: 59.77%;
	height: auto;
	transform-origin: center center;
	will-change: transform;
	pointer-events: none;
}
.dwellum-mark.is-spinning .dial {
	animation: dial-spin 3s both;
}
@keyframes dial-spin {
	0% {
		transform: rotate(0deg);
		animation-timing-function: cubic-bezier(0.45, 0, 0.55, 0); /* accelerate into wind-up */
	}
	10% {
		transform: rotate(-45deg);
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* whip forward, then smoothly decelerate to a stop */
	}
	100% {
		transform: rotate(1440deg); /* 4 full rotations -> lands at 0 visually */
	}
}
/* Nav-sized mark: small. Keeps the base hover (lift + slight rotate + dial spin),
   just with a nav-appropriate shadow. */
.nav-logo .dwellum-mark {
	width: 34px;
	margin: 0;
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.06));
}
/* Hover anywhere in the logo group (mark OR wordmark) lifts + spins the mark. */
.nav-logo:hover .dwellum-mark {
	transform: translateY(-6px) rotate(3deg);
	filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.09));
}
/* Idle float: the mark drifts gently up and down forever. It animates
   `translate`, which nothing else touches — the hover lift rides on
   `transform` and the dial spin on the dial's own `transform`. */
@media (prefers-reduced-motion: no-preference) {
	.dwellum-mark {
		animation: mark-float 4.5s ease-in-out infinite;
	}
}
@keyframes mark-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -3px; }
}

/* Horizontal logo link at the top of the sub-pages (support/privacy/philosophy) */
.home-link {
	display: inline-block;
	margin-bottom: 36px;
	text-decoration: none;
	width: min-content;
	cursor: pointer;
	transition: all 0.2s ease;
}
.home-link:hover {
	transform: translateY(-4px) translateX(-5px) rotate(1deg);
}
.home-link img {
	height: 42px;
	width: auto;
	display: block;
}

/* Legacy standalone logo image */
.logo {
	width: 84px;
	height: auto;
	margin-bottom: 28px;
	filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.05));
}

@media (max-width: 1024px) {
	.site-nav { padding: 20px 24px; }
	.nav-right { gap: 20px; }
	.nav-links { margin-right: 225px; }
	.logo { width: 69px; }
	.dwellum-mark { width: 69px; }
	.nav-logo .dwellum-mark { width: 34px; }
}
@media (max-width: 700px) {
	/* Nav (home) on mobile: keep just the logo + download for now */
	.site-nav { padding: 16px 20px; }
	.nav-links { display: none; }
	.nav-wordmark { font-size: 26px; }
	.cta.nav-download { font-size: 16px; padding: 13px 20px 15px; width: fit-content; }
	.logo { width: 53px; margin-bottom: 20px; }
	.dwellum-mark { width: 53px; margin-bottom: 20px; }
}

/* ---------- Hero (sub-pages) & landing (home) ---------- */
/* Sub-page hero (support / privacy / philosophy) */
.hero {
	display: flex;
	flex-direction: column;
}
body.home .hero {
	align-items: center;
	padding: 96px 0 48px;
}
body.support .hero,
body.privacy .hero {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	padding: 60px 0 130px;
	text-align: left;
}
body.privacy .hero { padding-bottom: 16px; }

/* Headings & intro copy */
h1 {
	line-height: 1;
	margin: 0 0 28px;
}
body.home h1 { font-size: 90px; }
body.support h1,
body.privacy h1 { font-size: 70px; }
.intro {
	font-weight: 400;
	font-size: 25px;
	line-height: 1.7;
	color: #2c2a45;
	max-width: 864px;
	margin: 0 0 40px;
	text-wrap: pretty;
}

/* Home landing: left-aligned copy + staggered phone screenshots */
.landing {
	position: relative;
	width: 100%;
	max-width: 1186px;
	text-align: left;
	padding: 40px 0 0;
}
.landing-inner {
	display: grid;
	grid-template-columns: minmax(420px, 600px) 1fr;
	gap: 40px;
	align-items: start;
}
.landing-copy {
	padding-top: 64px;
	max-width: 600px;
}
body.home .landing h1 {
	font-size: 60px;
	line-height: 1.05;
	margin: 0 0 24px;
	max-width: 520px;
}
.landing .intro {
	font-size: 21px;
	line-height: 1.7;
	color: #2c2a45;
	max-width: 582px;
	margin: 0 0 36px;
	font-weight: 400;
}
.landing .intro strong {
	font-weight: 700;
}
.landing-shots {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	min-width: 0;
}
.landing-shots .shot {
	flex: none;
	width: 266px;
	height: auto;
	border-radius: 19px;
	box-shadow: 0 14px 60px rgba(0, 0, 0, 0.10);
	display: block;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-shots .shot:hover {
	transform: translateY(-8px) scale(1.04) rotate(.5deg);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
}
.landing-shots .shot-1 { margin-top: 0; }
.landing-shots .shot-2 { margin-top: 41px; }
.landing-shots .shot-3 { margin-top: 83px; }

/* Page load: the screenshots rise into place one after another, left to right.
   Animates `transform` with no forwards fill, so the hover lift takes over once
   a shot has landed. */
@media (prefers-reduced-motion: no-preference) {
	.landing-shots .shot {
		animation: shot-rise 1.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}
	.landing-shots .shot-2 { animation-delay: 230ms; }
	.landing-shots .shot-3 { animation-delay: 460ms; }
	.landing-shots .shot-4 { animation-delay: 690ms; }
}
@keyframes shot-rise {
	from { transform: translateY(64px); opacity: 0; }
}

@media (max-width: 1024px) {
	body.home h1 { font-size: 72px; }
	body.support h1 { font-size: 56px; }
	.intro { font-size: 22px; }
	.landing { padding: 40px 0 0; }
	/* Stack: shots move above the copy, copy spreads full width */
	.landing-inner { grid-template-columns: 1fr; gap: 0;}
	.landing-shots { 
		overflow-x: scroll;
		margin-left: -64px;
		margin-right: -64px;
		padding-left: 64px;
		padding-right: 64px;
		padding-bottom: 74px;
		padding-top: 64px;
		margin-top: -64px;
		order: 1;
	}
	.landing-shots::-webkit-scrollbar {
	  display: none;
	}
	.landing-shots .shot { margin-top: 0; width: 200px; } /* drop the stagger when stacked */
	.landing-copy { padding-top: 0; padding-bottom: 0; max-width: none; order: 2; margin-bottom: 64px; margin-top: -16px;}
	body.home .landing h1 { font-size: 52px; max-width: none; }
	.landing .intro { max-width: none; }
}
@media (max-width: 600px) {
	body.home .hero { padding: 56px 0 32px; }
	body.support .hero { padding: 64px 0; }
	body.home h1 { font-size: 60px; margin-bottom: 20px; }
	body.support h1,
	body.privacy h1 { font-size: 48px; margin-bottom: 20px; }
	.intro { font-size: 19px; margin-bottom: 32px; }
	.landing { padding: 16px 0 0; }
	.landing-copy { padding-top: 0; padding-bottom: 0; margin-top: -20px; margin-bottom: 40px;}
	body.home .landing h1 { font-size: 40px; margin-bottom: 10px;}
	.landing .intro { font-size: 18px; margin-bottom: 25px;}
	.landing-shots { padding-bottom: 54px; gap: 12px;	}
	.landing-shots .shot { width: 166px; } 
}

/* ---------- Illustrations (book strips) ---------- */
/* Top-of-page strip (sub-pages): books slide down on hover */
.books-landing {
	display: block;
	width: 100%;
	height: auto;
	margin-top: -1px; /* hide hairline gap */
}
.books-landing [id^="Book-"] {
	transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
	transform-box: fill-box;
	transform-origin: center top;
}
.books-landing [id^="Book-"]:hover {
	transform: translateY(24px);
}
/* Bottom-of-landing strip (home): flipped books that slide up and straddle
   the seam between the cream landing and the purple features section. */
.books-bottom {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: -4vw; /* straddle the seam: lower part of books sits on the purple */
	align-self: flex-start;
	position: relative;
	z-index: 2;
	line-height: 0;
	pointer-events: none; /* only the books themselves should be interactive */
}
.books-bottom svg {
	display: block;
	width: 100%;
	height: auto;
	/* index.php adds 240 units of empty canvas below the shelf for books to
	   fall into; pull it back out of the layout (percent is of the strip width,
	   which the svg spans, so this tracks every breakpoint). */
	margin-bottom: calc(-240 / 1440 * 100%);
}
.books-bottom svg [id^="Book-"] {
	pointer-events: auto;
}
.books-bottom [id^="Book-"] {
	transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
	transform-box: fill-box;
	transform-origin: center bottom;
	/* Scroll fall: --drop (set per book by the script) is how far this book
	   travels, scaled by --fall (0 -> 1 with scroll). Uses `translate` so the
	   hover lift below keeps its own transition and composes on top. */
	translate: 0 calc(var(--drop, 0) * var(--fall, 0) * 1px);
}
.books-bottom [id^="Book-"]:hover {
	transform: translateY(-24px);
}
/* Page load: books rise up from below the landing one after another, left to
   right (--n is each book's position, set in index.php). Animates `transform`
   with no forwards fill, so the hover lift takes over once a book has landed,
   and stays clear of the scroll fall on `translate`. */
@media (prefers-reduced-motion: no-preference) {
	.books-bottom [id^="Book-"] {
		animation: book-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
		animation-delay: calc(var(--n, 0) * 20ms);
	}
}
@keyframes book-rise {
	from { transform: translateY(200px); } /* fully below the shelf line */
}
/* Stacked books illustration above the dark footer */
.books-footer {
	display: block;
	width: 100%;
	max-width: 900px;
	height: auto;
	margin: 0 auto -65px; /* overlap books onto dark band */
	position: relative;
	z-index: 1;
}
@media (max-width: 1024px) {
	.books-bottom { width: 150vw; }
	.books-footer { margin-bottom: -56px; width: 90%; }
}
@media (max-width: 600px) {
	.books-bottom { width: 200vw; }
	.books-footer { margin-bottom: -32px; width: 80%; }
}

/* ---------- Features (home, purple section) ---------- */
/* Full-bleed purple wrapper. The grid stays centered/max-width, so the
   background needs its own 100vw element. Purple fills most of the block then
   fades to transparent, letting the second row of screenshots spill onto the
   cream background below. */
.features-section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	align-self: flex-start;
	padding: 240px 64px 280px;
	box-sizing: border-box;
	background: #2c2a45;
	margin-bottom: -140px;
	/* Angled bottom edge where the purple meets the cream: the right corner stays
	   at the full height and the left rises by up to 4vw, never more than 80px,
	   so the first FAQ card (pulled up 100px by the margin above) still sits
	   across the seam. */
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - min(4vw, 80px)));
}
.features {
	width: 100%;
	max-width: 1186px;
	padding: 64px 0 132px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 24px;
	row-gap: 64px;
}
.features-section .features {
	padding: 0;
	margin: 0 auto;
}
.feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}
.feature img {
	width: 100%;
	height: auto;
	border-radius: 25px;
	box-shadow: 0 8px 23px rgba(0, 0, 0, 0.11);
	display: block;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature img:hover {
	transform: translateY(-8px) scale(1.04) rotate(.5deg);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
.feature figcaption {
	color: #ffffff;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 400;
	margin-top: 18px;
	max-width: 240px;
	text-wrap: balance;
}
@media (max-width: 1024px) {
	.features-section {
		background: #2c2a45;
		padding: 240px 64px 235px;
	}
	.features-section .feature figcaption { color: #ffffff; }
	.features {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 56px;
		column-gap: 24px;
	}
	.feature img { border-radius: 15px; }
	.feature figcaption { font-size: 18px; max-width: 350px; }
}
@media (max-width: 750px) {
	.features-section {
		background: #2c2a45;
		padding: 240px 64px 205px;
	}
	.features {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 48px;
		column-gap: 24px;
		padding: 30px 0 100px;
	}
}
@media (max-width: 600px) {
	.features-section { padding: 160px 24px 170px; margin-bottom: -100px;}
	.feature img { border-radius: 15px; }
	.feature figcaption { font-size: 18px; max-width: 350px; margin-top: 16px; }
}

/* ---------- FAQ accordions (support + home) ---------- */
.faqs {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 96px;
}
.faqs h2 {
	font-size: 50px;
	line-height: 1.1;
	margin: 0 0 40px;
}
.faq {
	position: relative;
	background: #ffffff;
	border-radius: 30px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	margin-bottom: 30px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.faq:last-child {
	margin-bottom: 0;
}
.faq:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.faq-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}
.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 30px 33px;
	cursor: pointer;
	font-weight: 590;
	font-size: 24px;
	line-height: 1.2;
	color: #2c2a45;
	text-align: left;
	user-select: none;
	transition: color 0.2s ease;
}
.faq-toggle:focus-visible + .faq-question {
	outline: 2px solid #5b54a1;
	outline-offset: -2px;
	border-radius: 30px;
}
.chevron {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: #2c2a45;
	transition: transform 0.35s ease;
}
.faq-toggle:checked ~ .faq-question .chevron {
	transform: rotate(180deg);
}
.faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}
.faq-toggle:checked ~ .faq-answer {
	grid-template-rows: 1fr;
}
.faq-answer-inner {
	overflow: hidden;
}
.faq-answer-inner p {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7;
	color: #2c2a45;
	margin: 0 0 16px;
	padding: 0 33px;
	text-align: left;
}
.faq-answer-inner p:first-child {
	margin-top: -10px;
}
.faq-answer-inner p:last-child {
	margin-bottom: 0;
	padding-bottom: 36px;
}
.faq-answer-inner a {
	color: #2c2a45;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: all .2s ease;
}
.faq-answer-inner a:hover {
	text-decoration-color: #8176EF;
	text-underline-offset: 6px;
	text-decoration-thickness: 4px;
}
/* Locked FAQ (a disabled toggle): permanently open, not interactive, no chevron.
   The disabled checkbox stays :checked so the answer stays open, and its label
   can't toggle it. These rules just remove the interactive affordances. */
.faq:has(.faq-toggle:disabled) .chevron {
	display: none;
}
.faq:has(.faq-toggle:disabled) .faq-question {
	cursor: default;
}
.faq:has(.faq-toggle:disabled):hover {
	transform: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
@media (max-width: 1024px) {
	.faqs h2 { font-size: 42px; }
}
@media (max-width: 600px) {
	.faqs h2 { font-size: 36px; margin-bottom: 24px; }
	.faq { border-radius: 24px; margin-bottom: 15px; }
	.faq-question { font-size: 18px; padding: 24px 24px; gap: 16px; }
	.chevron { width: 22px; height: 22px; }
	.faq-answer-inner p { font-size: 17px; padding: 0 24px; }
	.faq-answer-inner p:first-child { margin-top: -7px; }
	.faq-answer-inner p:last-child { padding-bottom: 24px; }
}

/* ---------- Featured App Store reviews (home) ---------- */
.reviews {
	/* Matches the screenshot grid's width, not the 900px FAQ column. */
	max-width: 1186px;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 96px;
}
.reviews-grid {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}
.reviews-col {
	flex: 1;
	min-width: 0;
}
/* Stagger the second column so the cards don't line up in rows. */
.reviews-col:last-child {
	margin-top: 70px;
}
.review {
	--tilt: 0deg;
	background: #ffffff;
	border-radius: 30px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	padding: 30px 33px;
	margin-bottom: 30px;
	text-align: left;
	transition: box-shadow 0.25s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Cards sit straight; --tilt is the angle each one leans to on hover, varied so
   neighbouring cards don't tip the same way. */
.reviews-col:first-child .review:nth-child(1) { --tilt: -1deg; }
.reviews-col:first-child .review:nth-child(2) { --tilt: 0.8deg; }
.reviews-col:first-child .review:nth-child(3) { --tilt: -0.5deg; }
.reviews-col:last-child .review:nth-child(1) { --tilt: 0.9deg; }
.reviews-col:last-child .review:nth-child(2) { --tilt: -0.7deg; }
.reviews-col:last-child .review:nth-child(3) { --tilt: 1.1deg; }
.reviews-col .review:last-child {
	margin-bottom: 0;
}
.review:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	transform: rotate(var(--tilt)) translateY(-4px) scale(1.02);
}
.review-stars {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}
.star {
	width: 36px;
	height: 36px;
	color: #f0a92b;
	filter: drop-shadow(0 0 3px rgba(240, 169, 43, 0.22)) drop-shadow(0 0 8px rgba(240, 169, 43, 0.08));
	/* The way out. It needs a gentler curve than the hover below: that one's
	   overshoot covers almost all of its distance in the first fraction of the
	   duration, which reads as a snap rather than a shrink. */
	transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Hovering the card pops the stars up in turn, left to right. The overshoot in
   the easing is what gives each one its bounce as it lands. Leaving the card
   runs the same wave backwards: the delays below are mirrored, so the last star
   to grow is the first to drop. */
.star:nth-child(1) { transition-delay: 0.24s; }
.star:nth-child(2) { transition-delay: 0.18s; }
.star:nth-child(3) { transition-delay: 0.12s; }
.star:nth-child(4) { transition-delay: 0.06s; }
.star:nth-child(5) { transition-delay: 0s; }
.review:hover .star {
	transform: scale(1.35);
	/* The springy curve lives here, not on .star, so the overshoot applies on
	   the way up only. */
	transition-duration: 0.7s;
	transition-timing-function: cubic-bezier(0.25, 2, 0.4, 1);
}
.review:hover .star:nth-child(1) { transition-delay: 0s; }
.review:hover .star:nth-child(2) { transition-delay: 0.06s; }
.review:hover .star:nth-child(3) { transition-delay: 0.12s; }
.review:hover .star:nth-child(4) { transition-delay: 0.18s; }
.review:hover .star:nth-child(5) { transition-delay: 0.24s; }
.review-title {
	font-size: 24px;
	font-weight: 590;
	line-height: 1.25;
	color: #2c2a45;
	margin: 0 0 8px;
}
.review-quote {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	color: #2c2a45;
	margin: 0 0 16px;
}
.review-author {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(44, 42, 69, 0.6);
	margin: 0;
}
@media (max-width: 700px) {
	.reviews-grid { flex-direction: column; gap: 15px; }
	.reviews-col:last-child { margin-top: 0; }
	.reviews-col .review:last-child { margin-bottom: 15px; }
}
@media (max-width: 600px) {
	.review { border-radius: 24px; padding: 24px; margin-bottom: 15px; }
	.star { width: 22px; height: 22px; }
	.review-title { font-size: 19px; }
	.review-quote { font-size: 17px; }
	.review-author { font-size: 16px; }
}

/* ---------- Policy content (privacy + philosophy) ---------- */
.policy {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 0 96px;
	text-align: left;
}
.policy .updated {
	color: #8a8799;
	font-size: 16px;
	margin: 0 0 6px;
}
.policy .update-note {
	color: #8a8799;
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 32px;
}
.policy p {
	font-size: 20px;
	line-height: 1.8;
	color: #2c2a45;
	margin: 0 0 16px;
}
.policy .lede {
	font-size: 22px;
	margin-bottom: 32px;
}
.policy h2 {
	font-size: 28px;
	line-height: 1.3;
	margin: 48px 0 12px;
}
.policy a {
	color: #2c2a45;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: all .2s ease;
}
.policy a:hover {
	text-decoration-color: #8176EF;
	text-underline-offset: 6px;
	text-decoration-thickness: 4px;
}
.policy-signature {
	width: 114px;
	height: auto;
	display: block;
	margin-top: 4px;
}
@media (max-width: 600px) {
	.policy p { font-size: 17px; }
	.policy .lede { font-size: 19px; }
	.policy h2 { font-size: 24px; margin-top: 40px; }
}

/* ---------- Available Now (legacy home block) ---------- */
.available {
	padding: 32px 0 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.available h2 {
	font-size: 50px;
	line-height: 1;
	margin: 0 0 36px;
}
@media (max-width: 1024px) {
	.available h2 { font-size: 42px; }
}
@media (max-width: 600px) {
	.available { padding: 16px 0 64px; }
	.available h2 { font-size: 36px; }
}

/* ---------- Dark footer ---------- */
footer {
	background: #2c2a45;
	color: #ffffff;
	padding: 160px 65px 120px;
}
.footer-content {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	max-width: 900px;
	margin: auto;
}
.signoff {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.signoff .happy {
	font-weight: 860;
	font-size: 21px;
	line-height: 1.2;
	margin: 0;
}
.signoff a {
	display: inline-block;
	transition: transform 0.2s ease;
	cursor: pointer;
}
.signoff a:hover {
	transform: translateY(-2px) rotate(-1deg);
}
.signoff .signature {
	width: 114px;
	height: auto;
	display: block;
}
.footer-nav {
	display: flex;
	align-items: center;
	gap: 20px;
}
.footer-nav a {
	color: #ffffff;
	font-size: 18px;
	text-decoration: none;
	background: #2c2a45;
	border-radius: 100px;
	padding: 10px 17px 12px;
	transition: all .2s ease;
}
.footer-nav a:hover {
	background: #5B54A1;
	transform: translateY(-4px);
}
.footer-nav .bluesky {
	display: inline-flex;
	align-items: center;
	padding: 15px;
	margin-bottom: 5px;
}
.footer-nav .bluesky img {
	width: 28px;
	height: auto;
	display: block;
}
.footer-nav .bluesky:hover {
	text-decoration: none;
	opacity: 0.8;
}
@media (max-width: 600px) {
	footer {
		padding: 100px 24px;
		flex-direction: column;
		align-items: center;
		gap: 28px;
		text-align: center;
	}
	.footer-content { justify-content: center; gap: 60px; }
	.signoff { align-items: center; }
	.footer-nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
	}
}