/* ============================================
   YepBook — TEXT-FIRST BOOKING
   Bold type. Dark phones. The product speaks.
   ============================================ */

:root {
	--bg: #F6F5F1;
	--surface: #FFFFFF;
	--text: #161715;
	--text-mid: #4A4C47;
	--text-dim: #5A5C56;
	--text-faint: #8A8C85;
	--border: rgba(22, 23, 21, 0.08);
	--hairline: #EEEDE8;
	--bubble: #EFEEEA;
	--accent: #1E6B52;
	--accent-hover: #15523E;
	--accent-light: #CFE3D8;
	--mint: #7FD1A8;
	--mono: 'Geist Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: 'Geist', system-ui, sans-serif;
	color: var(--text);
	background: var(--bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }
::selection { background: var(--accent-light); }

/* ---- Buttons ---- */

.btn {
	display: inline-block;
	padding: 0.85rem 2rem;
	background: var(--text);
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s;
	letter-spacing: -0.01em;
}

.btn:hover { opacity: 0.85; }
.btn { border-radius: 999px; font-weight: 500; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.85rem; }
.btn-outline { background: transparent; color: var(--text); border: 2px solid var(--border); }
.btn-outline:hover { border-color: var(--text); opacity: 1; }
.btn-ghost { background: transparent; color: var(--text); border: 2px solid var(--text); }
.btn-ghost:hover { background: var(--text); color: #fff; opacity: 1; }

/* ---- Hero ---- */

.hero {
	text-align: center;
	padding: 3rem 2rem 2rem;
	max-width: 64rem;
	margin: 0 auto;
}

.hero h1 {
	font-size: clamp(3rem, 9vw, 6rem);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.95;
	margin-bottom: 1.5rem;
	text-wrap: balance;
}

.hero-accent {
	color: var(--accent);
}

.hero p {
	font-size: 1.2rem;
	color: var(--text-dim);
	max-width: 28rem;
	margin: 0 auto 2.5rem;
	line-height: 1.5;
	font-weight: 400;
}

/* ---- Section Label ---- */

.section-label {
	font-family: var(--mono);
	font-size: 0.65rem;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

/* ---- Sections ---- */

.section {
	padding: 5rem 2rem;
	max-width: 64rem;
	margin: 0 auto;
}

.section h2 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.05em;
	margin-bottom: 0.75rem;
	line-height: 1.05;
}

.section p.sub {
	color: var(--text-dim);
	font-size: 1.05rem;
	max-width: 36rem;
	margin-bottom: 2.5rem;
	line-height: 1.5;
}

.section-center { text-align: center; }
.section-center p.sub { margin-left: auto; margin-right: auto; }

/* ---- Phone Frame ---- */

.phone {
	max-width: 22rem;
	margin: 0 auto;
	border: 2px solid #222;
	border-radius: 2rem;
	background: #111;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

.phone-notch {
	height: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.phone-notch::after {
	content: '';
	width: 5rem;
	height: 0.2rem;
	background: #333;
	border-radius: 100px;
}

.phone-body {
	padding: 0.75rem 1rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-height: 16rem;
}

.phone-header {
	font-family: var(--mono);
	font-size: 0.6rem;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #222;
	margin-bottom: 0.25rem;
}

/* ---- Chat Bubbles ---- */

.bubble {
	max-width: 82%;
	padding: 0.6rem 0.9rem;
	border-radius: 1rem;
	font-size: 0.85rem;
	line-height: 1.4;
}

.bubble-customer {
	background: var(--accent);
	color: #fff;
	align-self: flex-end;
	border-bottom-right-radius: 0.2rem;
	font-weight: 500;
}

.bubble-ai {
	background: #262626;
	color: #e5e5e5;
	align-self: flex-start;
	border-bottom-left-radius: 0.2rem;
}

/* ---- Phone Grid ---- */

.phone-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	max-width: 48rem;
	margin: 0 auto;
}

.phone-grid .phone { width: 100%; max-width: none; }

/* ---- Chat Carousel ---- */

.chat-demo { margin-bottom: 2rem; }

.chat-carousel {
	position: relative;
	min-height: 26rem;
}

.carousel-item {
	position: absolute;
	top: 0; left: 0; right: 0;
	opacity: 0;
	animation: carouselCycle 20s ease-in-out infinite;
}

.carousel-item-1 { animation-delay: 0s; }
.carousel-item-2 { animation-delay: 5s; }
.carousel-item-3 { animation-delay: 10s; }
.carousel-item-4 { animation-delay: 15s; }

@keyframes carouselCycle {
	0% { opacity: 0; transform: translateY(0.5rem); }
	3% { opacity: 1; transform: translateY(0); }
	22% { opacity: 1; transform: translateY(0); }
	25% { opacity: 0; transform: translateY(-0.5rem); }
	100% { opacity: 0; }
}

/* ---- Divider ---- */

.divider {
	border: none;
	border-top: 1px solid var(--border);
	max-width: 64rem;
	margin: 0 auto;
}

/* ---- Feature List ---- */

.feature-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 3rem;
	max-width: 48rem;
}

.feature-item h3 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.3rem;
}

.feature-item p {
	font-size: 0.9rem;
	color: var(--text-dim);
	line-height: 1.5;
}

/* ---- Use Cases ---- */

.use-cases {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	max-width: 40rem;
	margin: 0 auto;
}

.use-case {
	padding: 0.5rem 1.1rem;
	border: 1.5px solid var(--border);
	border-radius: 0.4rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-mid);
	transition: all 0.15s;
}

.use-case:hover { border-color: var(--text); color: var(--text); }

/* ---- Steps ---- */

.steps {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	max-width: 36rem;
}

.step { display: flex; gap: 1.25rem; align-items: flex-start; }

.step-num {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	background: var(--text);
	color: #fff;
	border-radius: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 800;
	font-family: var(--mono);
}

.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; }
.step p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; }

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

.faq {
	padding: 5rem 2rem;
	max-width: 40rem;
	margin: 0 auto;
}

.faq h2 {
	text-align: center;
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	margin-bottom: 2.5rem;
}

.faq-item { margin-bottom: 1.75rem; }
.faq-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem; }
.faq-item p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.6; }
.faq-item a { color: var(--accent); text-decoration: none; font-weight: 600; }
.faq-item a:hover { text-decoration: underline; }

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

.cta {
	text-align: center;
	padding: 5rem 2rem 6rem;
	max-width: 36rem;
	margin: 0 auto;
}

.cta h2 {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	margin-bottom: 0.75rem;
}

.cta p { color: var(--text-dim); margin-bottom: 2rem; font-size: 1.05rem; }

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

.pricing { padding: 4rem 2rem; max-width: 56rem; margin: 0 auto; }
.pricing h1, .pricing h2 {
	text-align: center; font-size: 2rem; font-weight: 800;
	letter-spacing: -0.04em; margin-bottom: 0.5rem;
}
.pricing > p { text-align: center; color: var(--text-dim); margin-bottom: 3rem; }

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
	max-width: 52rem;
	margin: 0 auto;
}

.pricing-card {
	border: 2px solid var(--border);
	border-radius: 0.75rem;
	padding: 2rem;
}

.pricing-card.featured { border-color: var(--text); }

.pricing-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.pricing-card .price { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.05em; margin-bottom: 0.25rem; }
.pricing-card .price span { font-size: 1rem; font-weight: 400; color: var(--text-dim); }
.pricing-card .price-note { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1.5rem; }
.pricing-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.pricing-card li { font-size: 0.9rem; color: var(--text-mid); padding-left: 1.25rem; position: relative; }
.pricing-card li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ---- Legal ---- */

.legal { max-width: 40rem; margin: 0 auto; padding: 3rem 2rem 4rem; }
.legal h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.35rem; }
.legal .updated { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 0.5rem; }
.legal h3 { font-size: 0.95rem; font-weight: 600; margin: 1rem 0 0.35rem; }
.legal p { font-size: 0.9rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 0.75rem; }
.legal ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.legal li { font-size: 0.9rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 0.25rem; }
.legal a { color: var(--accent); }
.legal strong { color: var(--text); }

/* ---- Responsive ---- */

@media (max-width: 640px) {
	.nav { padding: 1rem; }
	.nav-links a:not(.btn) { display: none; }
	.hero { padding: 5rem 1.5rem 2rem; }
	.hero h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
	.section { padding: 3rem 1.25rem; }
	.phone-grid { grid-template-columns: 1fr; max-width: 22rem; margin: 0 auto; }
	.feature-list { grid-template-columns: 1fr; }
}

/* ============================================
   Site chrome (header / footer) + home page
   ============================================ */

.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 40px);
	padding-right: clamp(20px, 4vw, 40px);
}

.pill {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s;
	white-space: nowrap;
}
.pill-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.pill-dark { background: var(--text); color: var(--bg); }
.pill-dark:hover { background: #2B2D29; }
.pill-green { background: var(--accent); color: #fff; }
.pill-green:hover { background: var(--accent-hover); }
.pill-mint { background: var(--mint); color: #10231A; font-weight: 600; }
.pill-mint:hover { background: #97DCB8; }

.eyebrow,
.eyebrow-muted,
.mono-tag {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}
.eyebrow-muted { color: #6A6C66; }
.eyebrow-mint { color: var(--mint); }

/* Pilot banner */

.pilot-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	padding: 9px 16px;
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}
.pilot-tag {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}
.pilot-banner a { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pilot-banner a:hover { text-decoration: underline; }
@media (max-width: 640px) {
	.pilot-banner { font-size: 13px; padding: 8px 16px; }
	.pilot-tag { display: none; }
}

.pilot-callout {
	max-width: 40rem;
	margin: 0 auto 2.5rem;
	padding: 18px 22px;
	border-radius: 14px;
	background: var(--accent-light);
	color: var(--text);
	text-align: center;
}
.pilot-callout .eyebrow { margin-bottom: 8px; }
.pilot-callout p { font-size: 15px; line-height: 1.55; color: var(--text-mid); }
.pilot-callout strong { color: var(--text); }

/* Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(246, 245, 241, 0.82);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid rgba(22, 23, 21, 0.07);
}
.site-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px);
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--text);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.02em;
	text-decoration: none;
}
.brand-logo { height: 28px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 28px); font-size: 14.5px; }
.site-nav-link { color: var(--text-mid); text-decoration: none; }
.site-nav-link:hover { color: var(--text); }

@media (max-width: 640px) {
	.site-nav-link { display: none; }
}

/* Footer */

.site-footer { background: var(--text); color: var(--bg); }
.site-footer .wrap { padding-top: clamp(72px, 10vw, 128px); padding-bottom: 32px; }
.site-footer-cta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 40px 64px;
	align-items: end;
	padding-bottom: clamp(56px, 8vw, 96px);
	border-bottom: 1px solid #2E302C;
}
.site-footer-cta h2 {
	font-size: clamp(40px, 6vw, 76px);
	line-height: 0.98;
	letter-spacing: -0.045em;
	font-weight: 600;
	text-wrap: balance;
}
.site-footer-cta p { margin-top: 22px; font-size: 18px; line-height: 1.55; color: #B4B6AF; }
.site-footer-action { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.site-footer-action .pill-lg { height: 56px; padding: 0 28px; font-size: 17px; }
.site-footer-note { font-size: 14px; color: var(--text-faint); }
.site-footer-links {
	padding: 48px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 32px;
	font-size: 14.5px;
}
.site-footer-links > div { display: flex; flex-direction: column; gap: 12px; }
.site-footer-links .eyebrow-muted { font-size: 11.5px; color: var(--text-faint); margin-bottom: 4px; }
.site-footer-links a { color: #E4E3DE; text-decoration: none; }
.site-footer-links a:hover { color: #fff; }
.site-footer-word {
	font-size: clamp(80px, 19vw, 248px);
	line-height: 0.8;
	letter-spacing: -0.06em;
	font-weight: 600;
	color: #232521;
	user-select: none;
	margin: 8px 0 28px;
}
.site-footer-base {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: var(--text-faint);
}
.site-footer-base .mono-tag { font-size: 11.5px; letter-spacing: 0.1em; color: var(--text-faint); }

/* Home */

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

.home-hero {
	padding-top: clamp(56px, 9vw, 120px);
	padding-bottom: clamp(64px, 9vw, 112px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
}
.home-hero-eyebrow { font-size: 13px; }
.home-hero h1 {
	margin-top: 22px;
	font-size: clamp(48px, 7.4vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.045em;
	font-weight: 600;
	text-wrap: balance;
}
.home-hero-lede {
	margin-top: 28px;
	max-width: 30em;
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.55;
	color: var(--text-mid);
	text-wrap: pretty;
}
.home-hero-actions { margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.home-hero-note { font-size: 14px; color: #6A6C66; }

.sms-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: 22px;
}
.sms-card-hero {
	scroll-margin-top: 96px;
	border-radius: 28px;
	padding: 22px 22px 26px;
	box-shadow: 0 30px 60px -30px rgba(22, 23, 21, 0.18);
	max-width: 460px;
	width: 100%;
	justify-self: center;
}
.sms-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 4px 14px;
	border-bottom: 1px solid var(--hairline);
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	color: var(--text-faint);
	text-transform: uppercase;
}
.sms-card-hero .sms-card-head { padding-bottom: 16px; }
.sms-live { display: flex; align-items: center; gap: 6px; }
.sms-live span { width: 6px; height: 6px; border-radius: 50%; background: #3FA877; }

.sms-thread {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 18px;
	font-size: 15.5px;
	line-height: 1.42;
}
.sms-thread-sm { padding-top: 16px; font-size: 15px; }
.msg { max-width: 80%; padding: 11px 15px; }
.sms-thread-sm .msg { max-width: 82%; padding: 10px 14px; }
.msg-in,
.msg-bot { align-self: flex-start; background: var(--bubble); border-radius: 20px 20px 20px 6px; }
.msg-out { align-self: flex-end; background: var(--accent); color: #fff; border-radius: 20px 20px 6px 20px; }
.msg-staff { align-self: flex-end; background: var(--text); color: var(--bg); border-radius: 18px 18px 6px 18px; }
.sms-thread-sm .msg-bot { border-radius: 18px 18px 18px 6px; }
.msg-status { align-self: flex-end; font-size: 12px; color: var(--text-faint); padding-right: 4px; }

.band { border-top: 1px solid var(--border); scroll-margin-top: 64px; }
.band-inner { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); }

.home-h2 {
	margin-top: 16px;
	font-size: clamp(36px, 5vw, 60px);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 600;
	text-wrap: balance;
}
.home-lede { margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--text-mid); max-width: 34em; text-wrap: pretty; }
.home-lede-flush { margin-top: 0; max-width: none; }

.home-grid-2 {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 20px;
}

.home-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 40px 64px;
}
.home-split-end { gap: 24px 64px; align-items: end; }

.home-features {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 32px;
}
.home-features > div { border-top: 1px solid var(--text); padding-top: 18px; }
.home-features h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.home-features p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-dim); }

.dark-card {
	background: var(--text);
	color: var(--bg);
	border-radius: 24px;
	padding: clamp(28px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}
.dark-card-quote {
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.03em;
	font-weight: 500;
	text-wrap: balance;
}

.home-faq { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.home-faq h2 {
	flex: 1 1 240px;
	font-size: clamp(30px, 3.6vw, 40px);
	line-height: 1.05;
	letter-spacing: -0.035em;
	font-weight: 600;
}
.home-faq-list { flex: 2 1 480px; min-width: 0; }
.home-faq-item { padding: 24px 0; border-top: 1px solid rgba(22, 23, 21, 0.12); }
.home-faq-item:last-child { border-bottom: 1px solid rgba(22, 23, 21, 0.12); }
.home-faq-item h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.home-faq-item p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--text-dim); }
.home-faq-item a { color: var(--accent); font-weight: 500; text-decoration: none; }
.home-faq-item a:hover { color: var(--accent-hover); }

/* Inner pages */

.page-hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(48px, 7vw, 88px); }
.page-hero h1 {
	margin-top: 22px;
	font-size: clamp(44px, 6.4vw, 84px);
	line-height: 0.95;
	letter-spacing: -0.045em;
	font-weight: 600;
	text-wrap: balance;
}

.step-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.step-index { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 10px; }

.home-grid-3 {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 20px;
}
.thread-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; }

.plain-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 24px;
	padding: clamp(28px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.plain-card p { font-size: 16px; line-height: 1.55; color: var(--text-dim); }
.home-grid-3 .dark-card-quote { font-size: clamp(22px, 2.2vw, 28px); }

.video-frame {
	margin-top: 48px;
	border-radius: 28px;
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: 0 30px 60px -30px rgba(22, 23, 21, 0.18);
}
.video-frame video { display: block; width: 100%; height: auto; }
.video-credit { margin-top: 14px; font-size: 13px; color: var(--text-faint); }
.video-credit a { color: inherit; }