/*
 * pawsumes-home.css — Homepage styles
 * Pawsumes 毛緣 · FurLifeHub
 *
 * Depends on: pawsumes.css (must load first)
 *
 * Contents:
 *   1.  Brand name explainer (.brand-explainer)
 *   2.  Hero section
 *   3.  Audience routing cards
 *   4.  Featured animals section
 *   5.  Shelter directory (homepage strip)
 *   6.  Lost animal / stray hold section
 *   7.  Software pitch section
 *   8.  Rehoming section
 *   9.  Social proof / numbers
 */

/* ══════════════════════════════════════════════════════════
   3. AUDIENCE ROUTING CARDS
══════════════════════════════════════════════════════════ */

.audience-section
{
	padding:64px 0;
}

.audience-grid
{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:16px;
}

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

@media (max-width:  600px)
{
	.audience-grid
	{
		grid-template-columns:1fr;
	}
}

.audience-card
{
	border-radius:22px;
	padding:34px 28px 28px;
	cursor:pointer;
	transition:transform 0.24s cubic-bezier(0.22,1,0.36,1), box-shadow 0.24s;
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	min-height:260px;
	text-decoration:none;
	color:inherit;
}

.audience-card:hover
{
	transform:translateY(-4px);
}

/* Variants */

.ac-adopt
{
	background:#fff;
	border:1px solid var(--paw-card-bdr);
}

.ac-adopt:hover
{
	box-shadow:0 16px 48px rgba(44,95,45,0.12) !important;
	border-color:rgba(44,95,45,0.18);
}

.ac-dir
{
	background:var(--paw-cream-dk);
	border:1px solid var(--paw-divider);
}

.ac-dir:hover
{
	box-shadow:0 16px 40px rgba(74,55,40,0.1) !important;
}

.ac-soft
{
	background:var(--paw-forest);
	border:1px solid var(--paw-forest);
}

.ac-soft:hover
{
	box-shadow:0 16px 48px rgba(44,95,45,0.28) !important;
}

.ac-rehome
{
	background:var(--paw-coral);
	border:1px solid var(--paw-coral);
}

.ac-rehome:hover
{
	box-shadow:0 16px 48px rgba(212,112,74,0.28) !important;
}

.ac-icon
{
	font-size:38px;
	margin-bottom:20px;
	line-height:1;
}

.ac-label
{
	font-size:10px;
	letter-spacing:0.16em;
	text-transform:uppercase;
	font-weight:600;
	margin-bottom:8px;
}

.ac-adopt  .ac-label
{
	color:var(--paw-sage);
}

.ac-dir    .ac-label
{
	color:var(--paw-bark-lt);
}

.ac-soft   .ac-label,
.ac-rehome .ac-label
{
	color:rgba(255,255,255,0.55);
}

.ac-title
{
	font-family:"Playfair Display", serif;
	font-size:20px;
	font-weight:700;
	line-height:1.2;
	margin-bottom:10px;
}

.ac-adopt .ac-title, .ac-dir .ac-title
{
	color:var(--paw-ink);
}

.ac-soft  .ac-title, .ac-rehome .ac-title
{
	color:#fff;
}

.ac-desc
{
	font-size:13px;
	line-height:1.65;
	font-weight:300;
}

.ac-adopt .ac-desc, .ac-dir .ac-desc
{
	color:var(--paw-bark-lt);
}

.ac-soft  .ac-desc, .ac-rehome .ac-desc
{
	color:rgba(255,255,255,0.6);
}

.ac-cta
{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:13px;
	font-weight:600;
	margin-top:20px;
	transition:gap 0.18s;
}

.ac-adopt  .ac-cta
{
	color:var(--paw-forest);
}

.ac-dir    .ac-cta
{
	color:var(--paw-bark);
}

.ac-soft   .ac-cta, .ac-rehome .ac-cta
{
	color:rgba(255,255,255,0.85);
}

.audience-card:hover .ac-cta
{
	gap:12px;
}

/* Decorative corner circle */

.ac-deco
{
	position:absolute;
	bottom:-20px;
	right:-20px;
	width:100px;
	height:100px;
	border-radius:50%;
	opacity:0.08;
	pointer-events:none;
}

.ac-adopt  .ac-deco
{
	background:var(--paw-forest);
}

.ac-dir    .ac-deco
{
	background:var(--paw-bark);
}

.ac-soft   .ac-deco,
.ac-rehome .ac-deco
{
	background:#fff;
}

/* ══════════════════════════════════════════════════════════
   5. SHELTER DIRECTORY STRIP (homepage teaser)
══════════════════════════════════════════════════════════ */

.dir-section
{
	padding:80px 0;
}

.dir-header
{
	margin-bottom:36px;
}

/* Compact horizontal org cards */

.org-card-h
{
	background:#fff;
	border:1px solid var(--paw-card-bdr);
	border-radius:18px;
	padding:20px 22px;
	cursor:pointer;
	transition:all 0.22s;
	height:100%;
	display:flex;
	flex-direction:column;
}

.org-card-h:hover
{
	transform:translateY(-3px);
	box-shadow:0 12px 36px rgba(44,95,45,0.1) !important;
	border-color:rgba(44,95,45,0.18);
}

.org-h-top
{
	display:flex;
	align-items:flex-start;
	gap:14px;
	margin-bottom:12px;
}

.org-h-logo
{
	width:48px;
	height:48px;
	border-radius:12px;
	background:var(--logo-bg, var(--paw-cream-dk));
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:22px;
	flex-shrink:0;
}

.org-h-name
{
	font-family:"Playfair Display", serif;
	font-size:16px;
	font-weight:700;
	color:var(--paw-ink);
	line-height:1.2;
	margin-bottom:4px;
}

.org-h-meta
{
	font-size:12px;
	color:var(--paw-bark-lt);
	display:flex;
	align-items:center;
	gap:6px;
}

.org-h-desc
{
	font-size:12px;
	color:var(--paw-bark-lt);
	line-height:1.6;
	font-weight:300;
	flex:1;
	margin-bottom:14px;
}

.org-h-footer
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:auto;
}

.org-stat
{
	font-size:12px;
	color:var(--paw-bark-lt);
	display:flex;
	align-items:center;
	gap:5px;
}

.org-stat strong
{
	color:var(--paw-forest);
	font-weight:700;
}

/* ══════════════════════════════════════════════════════════
   6. LOST ANIMAL / STRAY HOLD SECTION
══════════════════════════════════════════════════════════ */

.lost-section
{
	background:#fff;
	padding:80px 0;
	border-top:1px solid var(--paw-divider);
	border-bottom:1px solid var(--paw-divider);
}

/* Search bar — gold-accented to differ from adoption search */

.lost-search-wrap
{
	background:var(--paw-cream-dk);
	border:2px solid var(--paw-gold);
	border-radius:14px;
	padding:6px 6px 6px 20px;
	display:flex;
	align-items:center;
	gap:12px;
	max-width:680px;
}

.lost-search-wrap input
{
	flex:1;
	border:none !important;
	outline:none !important;
	box-shadow:none !important;
	background:none;
	font-family:"DM Sans", sans-serif;
	font-size:14px;
	color:var(--paw-ink);
}

.lost-search-wrap input::placeholder
{
	color:var(--paw-bark-xlt);
}

.lost-search-divider
{
	width:1px;
	height:24px;
	background:var(--paw-divider);
	flex-shrink:0;
}

.lost-location
{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	color:var(--paw-bark-lt);
	white-space:nowrap;
	cursor:pointer;
}

.lost-search-btn
{
	background:var(--paw-gold);
	color:#fff;
	border:none;
	border-radius:10px;
	padding:10px 22px;
	font-size:13px;
	font-weight:600;
	font-family:"DM Sans", sans-serif;
	cursor:pointer;
	white-space:nowrap;
	flex-shrink:0;
	transition:background 0.2s;
}

.lost-search-btn:hover
{
	background:#b07f20;
}

/* Urgency notice */

.lost-urgency-bar
{
	background:#FFF8E6;
	border:1px solid rgba(201,151,42,0.3);
	border-radius:12px;
	padding:14px 20px;
	display:flex;
	align-items:center;
	gap:14px;
	max-width:680px;
}

.lost-urgency-icon
{
	font-size:22px;
	flex-shrink:0;
}

.lost-urgency-text
{
	font-size:13px;
	color:var(--paw-bark);
	line-height:1.6;
	font-weight:300;
}

.lost-urgency-text strong
{
	color:#8B6010;
	font-weight:600;
}

/* How-to-reclaim steps */

.reclaim-step
{
	display:flex;
	align-items:flex-start;
	gap:14px;
}

.reclaim-step-num
{
	width:36px;
	height:36px;
	border-radius:50%;
	background:var(--paw-gold);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
	font-weight:700;
	flex-shrink:0;
}

.reclaim-step-title
{
	font-size:14px;
	font-weight:600;
	color:var(--paw-ink);
	margin-bottom:3px;
}

.reclaim-step-desc
{
	font-size:13px;
	color:var(--paw-bark-lt);
	line-height:1.6;
	font-weight:300;
}

.reclaim-connector
{
	width:1px;
	height:22px;
	background:rgba(201,151,42,0.25);
	margin-left:18px;
}

/* Aside card */

.hold-aside-card
{
	background:#FFF8E6;
	border:1px solid rgba(201,151,42,0.25);
	border-radius:18px;
	padding:24px;
}

.hold-aside-title
{
	font-family:"Playfair Display", serif;
	font-size:18px;
	font-weight:700;
	color:var(--paw-ink);
	margin-bottom:10px;
}

.hold-aside-sub
{
	font-size:13px;
	color:var(--paw-bark-lt);
	line-height:1.65;
	font-weight:300;
	margin-bottom:18px;
}

.hold-law-chip
{
	display:flex;
	align-items:flex-start;
	gap:10px;
	background:rgba(201,151,42,0.1);
	border:1px solid rgba(201,151,42,0.2);
	border-radius:10px;
	padding:12px 14px;
	font-size:12px;
	color:var(--paw-bark);
	line-height:1.6;
	font-weight:300;
}

.hold-law-icon
{
	font-size:16px;
	flex-shrink:0;
	margin-top:1px;
}

/* ══════════════════════════════════════════════════════════
   7. SOFTWARE PITCH SECTION
══════════════════════════════════════════════════════════ */

.software-section
{
	background:var(--paw-forest);
	padding:88px 0;
	position:relative;
	overflow:hidden;
}

.software-section::before
{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(ellipse at 5%  100%, rgba(201,151,42,0.10)  0%, transparent 40%),
    radial-gradient(ellipse at 95% 0%,   rgba(168,197,160,0.08) 0%, transparent 45%);
	pointer-events:none;
}

.software-section::after
{
	content:"";
	position:absolute;
	inset:0;
	background-image:linear-gradient(rgba(168,197,160,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,197,160,0.05) 1px, transparent 1px);
	background-size:56px 56px;
	pointer-events:none;
}

.software-content
{
	position:relative;
	z-index:2;
}

.software-eyebrow
{
	font-size:11px;
	letter-spacing:0.2em;
	text-transform:uppercase;
	color:var(--paw-mint);
	font-weight:500;
	margin-bottom:16px;
	display:flex;
	align-items:center;
	gap:10px;
}

.software-eyebrow::before
{
	content:"";
	width:24px;
	height:1px;
	background:var(--paw-mint);
}

.software-title
{
	font-family:"Fraunces", serif;
	font-size:clamp(36px, 4.5vw, 62px);
	font-weight:300;
	color:#fff;
	letter-spacing:-0.04em;
	line-height:1;
	margin-bottom:20px;
}

.software-title em
{
	font-style:italic;
	color:var(--paw-mint);
}

.software-sub
{
	font-size:16px;
	color:rgba(255,255,255,0.5);
	font-weight:300;
	line-height:1.75;
	max-width:520px;
}

/* Feature rows */

.sw-feature
{
	display:flex;
	align-items:flex-start;
	gap:14px;
	padding:18px 20px;
	background:rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.1);
	border-radius:16px;
	margin-bottom:12px;
	transition:background 0.2s;
	min-height:120px;
}

.sw-feature:hover
{
	background:rgba(255,255,255,0.1);
}

.sw-feature-icon
{
	font-size:22px;
	flex-shrink:0;
	margin-top:2px;
}

.sw-feature-title
{
	font-size:14px;
	font-weight:600;
	color:#fff;
	margin-bottom:4px;
}

.sw-feature-desc
{
	font-size:13px;
	color:rgba(255,255,255,0.5);
	line-height:1.6;
	font-weight:300;
}

/* Pricing tier cards */

.tier-card
{
	background:rgba(255,255,255,0.07);
	border:1px solid rgba(255,255,255,0.12);
	border-radius:20px;
	padding:28px 24px;
	height:100%;
	transition:all 0.22s;
	cursor:pointer;
	position:relative;
}

.tier-card:hover
{
	background:rgba(255,255,255,0.12);
	transform:translateY(-2px);
}

.tier-card.featured
{
	background:rgba(168,197,160,0.14);
	border-color:rgba(168,197,160,0.3);
}

.tier-featured-badge
{
	position:absolute;
	top:-10px;
	left:50%;
	transform:translateX(-50%);
	background:var(--paw-gold);
	color:var(--paw-ink);
	padding:3px 16px;
	border-radius:100px;
	font-size:10px;
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
	white-space:nowrap;
}

.tier-name
{
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--paw-mint);
	font-weight:600;
	margin-bottom:10px;
}

.tier-price
{
	font-family:"Playfair Display", serif;
	font-size:32px;
	font-weight:700;
	color:#fff;
	line-height:1;
	margin-bottom:4px;
}

.tier-price-sub
{
	font-size:12px;
	color:rgba(255,255,255,0.4);
	margin-bottom:20px;
}

.tier-feature-list
{
	list-style:none;
	padding:0;
	margin:0;
}

.tier-feature-list li
{
	font-size:13px;
	color:rgba(255,255,255,0.65);
	padding:7px 0;
	border-bottom:1px solid rgba(255,255,255,0.07);
	display:flex;
	align-items:center;
	gap:8px;
}

.tier-feature-list li::before
{
	content:"✓";
	color:var(--paw-mint);
	font-size:11px;
	font-weight:700;
	flex-shrink:0;
}

/* Dashboard mockup */

.dashboard-mockup
{
	background:rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.12);
	border-radius:16px;
	overflow:hidden;
}

.mockup-bar
{
	background:rgba(255,255,255,0.05);
	border-bottom:1px solid rgba(255,255,255,0.08);
	padding:12px 16px;
	display:flex;
	align-items:center;
	gap:8px;
}

.mockup-dot
{
	width:8px;
	height:8px;
	border-radius:50%;
}

.mockup-title
{
	font-size:12px;
	color:rgba(255,255,255,0.35);
	margin-left:8px;
}

.mockup-body
{
	padding:20px 16px;
}

.mockup-stat
{
	padding:12px 14px;
	background:rgba(255,255,255,0.05);
	border-radius:10px;
	margin-bottom:10px;
}

.mockup-stat-label
{
	font-size:10px;
	color:rgba(255,255,255,0.35);
	text-transform:uppercase;
	letter-spacing:0.1em;
	margin-bottom:4px;
}

.mockup-stat-val
{
	font-family:"Playfair Display", serif;
	font-size:22px;
	font-weight:700;
	color:#fff;
	line-height:1;
}

.mockup-stat-change
{
	font-size:11px;
	color:var(--paw-mint);
}

.mockup-animal
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 0;
	border-bottom:1px solid rgba(255,255,255,0.06);
}

.mockup-animal-thumb
{
	width:36px;
	height:36px;
	border-radius:8px;
	background:rgba(255,255,255,0.1);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:16px;
	flex-shrink:0;
}

.mockup-animal-name
{
	font-size:13px;
	color:rgba(255,255,255,0.8);
	font-weight:500;
}

.mockup-animal-meta
{
	font-size:11px;
	color:rgba(255,255,255,0.35);
}

.mockup-status
{
	margin-left:auto;
	padding:3px 8px;
	border-radius:100px;
	font-size:10px;
	font-weight:600;
}

.status-avail
{
	background:rgba(168,197,160,0.2);
	color:var(--paw-mint);
}

.status-pend
{
	background:rgba(201,151,42,0.2);
	color:var(--paw-gold);
}

.status-adopted
{
	background:rgba(168,197,160,0.12);
	color:rgba(168,197,160,0.6);
}

/* ══════════════════════════════════════════════════════════
   8. REHOMING SECTION
══════════════════════════════════════════════════════════ */

.rehome-section
{
	padding:88px 0;
	background:#fff;
}

.rehome-card
{
	background:var(--paw-cream);
	border:1px solid var(--paw-divider);
	border-radius:22px;
	padding:48px;
	position:relative;
	overflow:hidden;
}

.rehome-card::before
{
	content:"";
	position:absolute;
	right:-60px;
	bottom:-60px;
	width:240px;
	height:240px;
	border-radius:50%;
	background:var(--paw-coral);
	opacity:0.05;
	pointer-events:none;
}

.rehome-eyebrow
{
	font-size:11px;
	letter-spacing:0.18em;
	text-transform:uppercase;
	color:var(--paw-coral);
	font-weight:500;
	margin-bottom:16px;
	display:flex;
	align-items:center;
	gap:10px;
}

.rehome-eyebrow::before
{
	content:"";
	width:20px;
	height:1px;
	background:var(--paw-coral);
}

.rehome-title
{
	font-family:"Playfair Display", serif;
	font-size:clamp(26px,3vw,38px);
	font-weight:700;
	color:var(--paw-ink);
	letter-spacing:-0.02em;
	margin-bottom:14px;
}

.rehome-sub
{
	font-size:15px;
	color:var(--paw-bark);
	line-height:1.75;
	font-weight:300;
	max-width:480px;
}

.rehome-step
{
	display:flex;
	align-items:flex-start;
	gap:16px;
}

.rehome-step-num
{
	width:36px;
	height:36px;
	border-radius:50%;
	background:var(--paw-coral);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	font-weight:700;
	flex-shrink:0;
}

.rehome-step-title
{
	font-size:14px;
	font-weight:600;
	color:var(--paw-ink);
	margin-bottom:3px;
}

.rehome-step-desc
{
	font-size:13px;
	color:var(--paw-bark-lt);
	line-height:1.55;
	font-weight:300;
}

.rehome-step-connector
{
	width:1px;
	height:28px;
	background:var(--paw-divider);
	margin-left:18px;
}

.rehome-tag
{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--paw-cream-dk);
	border:1px solid var(--paw-divider);
	color:var(--paw-bark);
	padding:7px 16px;
	border-radius:100px;
	font-size:12px;
}

/* ══════════════════════════════════════════════════════════
   9. SOCIAL PROOF / NUMBERS
══════════════════════════════════════════════════════════ */

.proof-section
{
	padding:72px 0;
	background:var(--paw-cream-dk);
}

.proof-num
{
	font-family:"Fraunces", serif;
	font-size:clamp(44px, 6vw, 72px);
	font-weight:300;
	color:var(--paw-ink);
	letter-spacing:-0.05em;
	line-height:1;
}

.proof-num em
{
	font-style:italic;
	color:var(--paw-forest);
}

.proof-label
{
	font-size:13px;
	color:var(--paw-bark-lt);
	margin-top:6px;
	font-weight:300;
}

.proof-divider
{
	width:1px;
	background:var(--paw-divider);
}

.testimonial-card
{
	background:#fff;
	border:1px solid var(--paw-card-bdr);
	border-radius:20px;
	padding:32px;
}

.testimonial-quote
{
	font-family:"Playfair Display", serif;
	font-size:18px;
	font-style:italic;
	color:var(--paw-ink);
	line-height:1.65;
	margin-bottom:20px;
}

.testimonial-quote::before
{
	content:"“";
	font-size:36px;
	color:var(--paw-mint);
	line-height:0;
	vertical-align:-12px;
	margin-right:4px;
}

.testimonial-author
{
	font-size:13px;
	font-weight:600;
	color:var(--paw-ink);
}

.testimonial-org
{
	font-size:12px;
	color:var(--paw-bark-lt);
}

/* ═══════════════════════
   FEATURES
═══════════════════════ */

.features-section
{
	padding:96px 0;
	background:var(--paw-cream);
}

.feature-row
{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:56px;
	align-items:center;
	padding:64px 0;
	border-bottom:1px solid var(--paw-divider);
}

.feature-row:first-child
{
	padding-top:0;
}

.feature-row:last-child
{
	border-bottom:none;
	padding-bottom:0;
}

.feature-row.reverse
{
	direction:rtl;
}

.feature-row.reverse > *
{
	direction:ltr;
}

.feature-tag
{
	display:inline-flex;
	align-items:center;
	gap:7px;
	background:rgba(44,95,45,.08);
	color:var(--paw-forest);
	font-size:11px;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	padding:5px 12px;
	border-radius:20px;
	margin-bottom:16px;
}

.feature-tag i
{
	font-size:10px;
}

.feature-title
{
	font-family:"Playfair Display", serif;
	font-size:clamp(22px, 2.8vw, 30px);
	font-weight:700;
	color:var(--paw-ink);
	line-height:1.2;
	letter-spacing:-.02em;
	margin-bottom:14px;
}

.feature-title em
{
	font-style:italic;
	color:var(--paw-forest);
}

.feature-body
{
	font-size:15px;
	font-weight:300;
	color:var(--paw-bark-lt);
	line-height:1.75;
	margin-bottom:20px;
}

.feature-bullets
{
	list-style:none;
	padding:0;
	margin:0 0 24px;
}

.feature-bullets li
{
	font-size:13px;
	font-weight:400;
	color:var(--paw-ink);
	padding:5px 0;
	display:flex;
	align-items:flex-start;
	gap:9px;
	border-bottom:1px solid var(--paw-divider);
}

.feature-bullets li:last-child
{
	border-bottom:none;
}

.feature-bullets li i
{
	color:var(--paw-forest);
	font-size:11px;
	margin-top:3px;
	flex-shrink:0;
}

/* Feature mock — right side illustration */

.feature-mock
{
	background:#FFFDF9;
	border:1px solid rgba(74,55,40,.08);
	border-radius:20px;
	overflow:hidden;
	box-shadow:0 16px 48px rgba(26,46,26,.1);
}

.mock-bar
{
	background:var(--paw-ink);
	padding:10px 16px;
	display:flex;
	align-items:center;
	gap:6px;
}

.mock-dot
{
	width:8px;
	height:8px;
	border-radius:50%;
}

.mock-title
{
	font-size:11px;
	font-weight:400;
	color:rgba(245,240,232,.4);
	margin-left:8px;
}

.mock-body
{
	padding:18px;
}

/* Mini animal card */

.mock-animal
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 12px;
	background:var(--paw-cream);
	border-radius:10px;
	margin-bottom:8px;
	border:1px solid var(--paw-divider);
}

.mock-thumb
{
	width:36px;
	height:36px;
	border-radius:9px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:17px;
	flex-shrink:0;
}

.mock-name
{
	font-size:12px;
	font-weight:500;
	color:var(--paw-ink);
}

.mock-meta
{
	font-size:10px;
	font-weight:300;
	color:var(--paw-bark-lt);
}

.mock-badge
{
	margin-left:auto;
	font-size:10px;
	font-weight:600;
	padding:2px 9px;
	border-radius:10px;
	flex-shrink:0;
}

.mb-green
{
	background:rgba(107,158,108,.15);
	color:var(--paw-forest);
}

.mb-gold
{
	background:rgba(201,151,42,.1);
	color:var(--paw-gold);
}

.mb-coral
{
	background:rgba(212,112,74,.1);
	color:var(--paw-coral);
}

/* Mini stat row */

.mock-stats
{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:8px;
	margin-bottom:12px;
}

.mock-stat
{
	background:var(--paw-cream);
	border-radius:10px;
	padding:10px 12px;
	border:1px solid var(--paw-divider);
	text-align:center;
}

.mock-stat-num
{
	font-family:"Fraunces", serif;
	font-size:22px;
	font-weight:600;
	color:var(--paw-ink);
	line-height:1;
}

.mock-stat-lbl
{
	font-size:10px;
	font-weight:300;
	color:var(--paw-bark-lt);
	margin-top:3px;
}

/* Application mock */

.mock-app
{
	display:flex;
	align-items:center;
	gap:10px;
	padding:9px 12px;
	background:var(--paw-cream);
	border-radius:8px;
	margin-bottom:6px;
	border:1px solid var(--paw-divider);
}

.mock-app-avatar
{
	width:28px;
	height:28px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:10px;
	font-weight:600;
	color:#fff;
	flex-shrink:0;
}

.mock-app-name
{
	font-size:11px;
	font-weight:500;
	color:var(--paw-ink);
}

.mock-app-for
{
	font-size:10px;
	font-weight:300;
	color:var(--paw-bark-lt);
}

/* Vaccine mock */

.mock-vaccine
{
	display:flex;
	align-items:center;
	gap:9px;
	padding:8px 10px;
	background:var(--paw-cream);
	border-radius:8px;
	margin-bottom:6px;
	border:1px solid var(--paw-divider);
}

.mock-vax-icon
{
	width:26px;
	height:26px;
	border-radius:7px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:10px;
	flex-shrink:0;
}

.vax-ok
{
	background:rgba(107,158,108,.15);
	color:var(--paw-forest);
}

.vax-warn
{
	background:rgba(201,151,42,.1);
	color:var(--paw-gold);
}

.vax-over
{
	background:rgba(212,112,74,.1);
	color:var(--paw-coral);
}

/* ═══════════════════════
   FREE CALLOUT
═══════════════════════ */

.free-section
{
	background:var(--paw-ink);
	padding:80px 0;
	position:relative;
	overflow:hidden;
}

.free-section::before
{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(ellipse at 50% 100%, rgba(44,95,45,.25) 0%, transparent 60%);
}

.free-pill
{
	display:inline-flex;
	align-items:center;
	gap:8px;
	background:rgba(107,158,108,.15);
	border:1px solid rgba(107,158,108,.3);
	border-radius:100px;
	padding:6px 16px 6px 10px;
	margin-bottom:20px;
}

.free-pill-dot
{
	width:7px;
	height:7px;
	background:var(--paw-sage);
	border-radius:50%;
	animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse
{
	0%,100%
	{
		opacity:1;
	}

	50%
	{
		opacity:.3;
	}
}

.free-pill span
{
	font-size:12px;
	font-weight:500;
	color:var(--paw-sage);
	letter-spacing:.04em;
}

.free-title
{
	font-family:"Playfair Display", serif;
	font-size:clamp(28px, 4vw, 44px);
	font-weight:700;
	color:var(--paw-cream);
	line-height:1.15;
	letter-spacing:-.02em;
	margin-bottom:16px;
}

.free-title em
{
	font-style:italic;
	color:var(--paw-gold);
}

.free-body
{
	font-size:16px;
	font-weight:300;
	color:rgba(245,240,232,.55);
	line-height:1.75;
	max-width:520px;
	margin-bottom:32px;
}

.free-includes
{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-bottom:36px;
}

.free-chip
{
	display:flex;
	align-items:center;
	gap:6px;
	background:rgba(245,240,232,.06);
	border:1px solid rgba(245,240,232,.1);
	border-radius:100px;
	padding:7px 14px;
	font-size:12px;
	font-weight:400;
	color:rgba(245,240,232,.7);
}

.free-chip i
{
	color:var(--paw-sage);
	font-size:11px;
}

/* ═══════════════════════
   HOW IT WORKS
═══════════════════════ */

.how-section
{
	padding:96px 0;
	background:#FFFDF9;
}

.step-card
{
	position:relative;
	text-align:center;
	padding:32px 24px;
}

.step-num
{
	font-family:"Fraunces", serif;
	font-size:56px;
	font-weight:600;
	color:rgba(44,95,45,.1);
	line-height:1;
	margin-bottom:8px;
}

.step-icon-wrap
{
	width:52px;
	height:52px;
	background:rgba(44,95,45,.08);
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 14px;
}

.step-icon-wrap i
{
	color:var(--paw-forest);
	font-size:20px;
}

.step-title
{
	font-family:"Fraunces", serif;
	font-size:18px;
	font-weight:600;
	color:var(--paw-ink);
	margin-bottom:8px;
}

.step-body
{
	font-size:13px;
	font-weight:300;
	color:var(--paw-bark-lt);
	line-height:1.7;
}

.step-connector
{
	display:flex;
	align-items:center;
	justify-content:center;
	padding-top:28px;
	color:var(--paw-bark-lt);
	font-size:18px;
}

/* ═══════════════════════
   SOCIAL PROOF
═══════════════════════ */

.proof-section
{
	padding:80px 0;
	background:var(--paw-cream);
	border-top:1px solid var(--paw-divider);
	border-bottom:1px solid var(--paw-divider);
}

.quote-card
{
	background:#FFFDF9;
	border:1px solid var(--paw-divider);
	border-radius:16px;
	padding:28px 24px 24px;
	height:100%;
	position:relative;
}

.quote-mark
{
	font-family:"Fraunces", serif;
	font-size:48px;
	font-weight:600;
	color:var(--paw-sage);
	line-height:.8;
	margin-bottom:12px;
}

.quote-text
{
	font-family:"Fraunces", serif;
	font-size:15px;
	font-weight:300;
	font-style:italic;
	color:var(--paw-ink);
	line-height:1.7;
	margin-bottom:18px;
}

.quote-author
{
	display:flex;
	align-items:center;
	gap:10px;
}

.quote-avatar
{
	width:36px;
	height:36px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:12px;
	font-weight:600;
	color:#fff;
	flex-shrink:0;
}

.qa1
{
	background:var(--paw-forest);
}

.qa2
{
	background:var(--paw-coral);
}

.qa3
{
	background:#5A8090;
}

.quote-name
{
	font-size:12px;
	font-weight:500;
	color:var(--paw-ink);
}

.quote-org
{
	font-size:11px;
	font-weight:300;
	color:var(--paw-bark-lt);
}

/* Org logo strip */

.logo-strip
{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:32px;
	flex-wrap:wrap;
	margin-top:48px;
	padding-top:36px;
	border-top:1px solid var(--paw-divider);
}

.logo-strip-label
{
	font-size:11px;
	font-weight:500;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--paw-bark-lt);
	width:100%;
	text-align:center;
	margin-bottom:8px;
}

.org-logo-chip
{
	display:flex;
	align-items:center;
	gap:8px;
	background:#FFFDF9;
	border:1px solid var(--paw-divider);
	border-radius:10px;
	padding:8px 16px;
	font-size:12px;
	font-weight:500;
	color:var(--paw-bark-lt);
}

.org-logo-chip .dot
{
	width:8px;
	height:8px;
	border-radius:50%;
}

/* ═══════════════════════
   FAQ
═══════════════════════ */

.faq-section
{
	padding:80px 0;
	background:#FFFDF9;
}

.faq-item
{
	border-bottom:1px solid var(--paw-divider);
	padding:20px 0;
}

.faq-item:last-child
{
	border-bottom:none;
}

.faq-q
{
	font-size:15px;
	font-weight:500;
	color:var(--paw-ink);
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
	cursor:pointer;
}

.faq-q i
{
	color:var(--paw-bark-xlt);
	font-size:12px;
	flex-shrink:0;
	margin-top:4px;
	transition:transform .2s;
}

.faq-q.open i
{
	transform:rotate(180deg);
}

.faq-a
{
	font-size:14px;
	font-weight:300;
	color:var(--paw-bark-lt);
	line-height:1.75;
	padding-top:10px;
	display:none;
}

.faq-a.open
{
	display:block;
}

/* ═══════════════════════
   FINAL CTA
═══════════════════════ */

.final-cta
{
	background:var(--paw-forest);
	padding:80px 0;
	position:relative;
	overflow:hidden;
	text-align:center;
}

.final-cta::before
{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(ellipse at 50% 120%, rgba(245,240,232,.06) 0%, transparent 60%);
}

.final-cta-title
{
	font-family:"Playfair Display", serif;
	font-size:clamp(28px, 4vw, 46px);
	font-weight:700;
	color:var(--paw-cream);
	line-height:1.15;
	letter-spacing:-.02em;
	margin-bottom:14px;
}

.final-cta-title em
{
	font-style:italic;
	color:var(--paw-gold);
}

.final-cta-sub
{
	font-size:16px;
	font-weight:300;
	color:rgba(245,240,232,.6);
	max-width:480px;
	margin:0 auto 32px;
	line-height:1.65;
}

.btn-cta-white
{
	background:var(--paw-cream) !important;
	color:var(--paw-forest) !important;
	border:none;
	border-radius:100px;
	font-family:"DM Sans", sans-serif;
	font-size:15px;
	font-weight:600;
	padding:14px 32px;
	transition:all .2s !important;
	display:inline-flex;
	align-items:center;
	gap:9px;
}

.btn-cta-white:hover
{
	background:#FFFDF9 !important;
	transform:translateY(-2px);
	box-shadow:0 8px 28px rgba(0,0,0,.2) !important;
}

.final-note
{
	font-size:12px;
	font-weight:300;
	color:rgba(245,240,232,.35);
	margin-top:16px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
}

.final-note i
{
	font-size:10px;
}