/* ==========================================================================
   PIN — Homepage
   Page-specific layout only. Shared bits (buttons, bands, container, the
   .reveal motion utility, .pin-cta-row) live in the child theme's style.css
   — this file never redefines them. Scoped under .pin-home so it can never
   collide with another page's CSS.
   ========================================================================== */

.pin-home h1, .pin-home h2, .pin-home h3 { margin: 0; }

/* ---------- Hero ---------- */
.pin-home .hero {
	position: relative;
	overflow: hidden;
	padding-block: 104px 80px;
}
.pin-home .hero::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(720px 420px at 88% -10%, rgba(253,246,239,.14), transparent 60%),
		radial-gradient(600px 500px at -5% 110%, rgba(253,246,239,.10), transparent 55%);
	pointer-events: none;
}
.pin-home .hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}
.pin-home .hero-eyebrow {
	font-family: var(--pin-sans);
	font-size: 12px;
	letter-spacing: 1.9px;
	text-transform: uppercase;
	color: var(--pin-paper);
	opacity: 0.8;
	font-weight: 600;
}
.pin-home .hero h1 {
	font-family: var(--pin-serif);
	font-weight: 500;
	color: var(--pin-paper);
	font-size: 58px;
	line-height: 1.08;
	letter-spacing: -0.6px;
	margin-top: 10px;
}
.pin-home .hero h1 em {
	font-style: italic;
	color: #f4d9cf;
}
.pin-home .hero-sub {
	font-family: var(--pin-sans);
	color: #f0e2da;
	font-size: 17px;
	line-height: 1.6;
	max-width: 46ch;
	margin-top: 16px;
}
.pin-home .hero-ctas { margin-top: 28px; }

/* Stat strip: real, factual, non-fabricated network facts */
.pin-home .hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 26px 35px;
	margin-top: 38px;
	padding-top: 26px;
	border-top: 1px solid rgba(253,246,239,0.22);
}
.pin-home .hero-stat b {
	display: block;
	font-family: var(--pin-serif);
	font-size: 24px;
	color: var(--pin-paper);
	line-height: 1;
}
.pin-home .hero-stat span {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #e8d3c9;
}

/* Hero card: live "one seat per industry" explainer — the signature
   element, built from the actual mechanic instead of decoration */
.pin-home .hero-card {
	background: var(--pin-paper);
	border-radius: var(--pin-radius-lg);
	padding: 26px 26px 22px;
	box-shadow: 0 20px 44px rgba(20,10,8,0.28);
	color: var(--pin-ink);
}
.pin-home .hero-card__label {
	font-size: 11px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--pin-garnet);
	font-weight: 700;
}
.pin-home .hero-card__title {
	font-family: var(--pin-serif);
	font-size: 22px;
	margin-top: 6px;
	color: var(--pin-ink);
}
.pin-home .hero-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--pin-line);
	font-size: 14px;
	color: var(--pin-ink);
}
.pin-home .hero-card__row:first-of-type { border-top: none; margin-top: 14px; }
.pin-home .hero-card__seat {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
}
.pin-home .hero-card__seat--open { background: #e6f0df; color: var(--pin-open); }
.pin-home .hero-card__seat--filled { background: var(--pin-line); color: var(--pin-ink-soft); }
.pin-home .hero-card__foot {
	margin-top: 14px;
	font-size: 12px;
	color: var(--pin-ink-soft);
	line-height: 1.5;
}

/* ---------- Video ---------- */
.pin-home .video-band { text-align: center; }
.pin-home .video-band .finder-head { margin-bottom: 29px; }
.pin-home .video-frame {
	max-width: 860px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--pin-radius-lg);
	overflow: hidden;
	box-shadow: 0 20px 44px rgba(20,10,8,0.16);
}
.pin-home .video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Find a chapter ---------- */
.pin-home .finder-head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.pin-home .finder-head h2 { font-size: 37px; }
.pin-home .finder-head p { color: var(--pin-ink-soft); margin-top: 10px; }

/* ---------- Differentiators ---------- */
.pin-home .diff-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.pin-home .diff-card { text-align: left; }
.pin-home .diff-ico {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 10px;
	background: var(--pin-garnet-tint);
	color: var(--pin-garnet);
	margin-bottom: 14px;
}
.pin-home .diff-card h3 { font-family: var(--pin-sans); font-weight: 600; font-size: 16px; color: var(--pin-ink); }
.pin-home .diff-card p { margin-top: 6px; font-size: 14px; color: var(--pin-ink-soft); line-height: 1.55; }

/* ---------- Proof band ---------- */
.pin-home .proof-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.pin-home .proof-media {
	border-radius: var(--pin-radius-lg);
	overflow: hidden;
	aspect-ratio: 4/3;
}
.pin-home .proof-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pin-home .proof-media .pin-slider,
.pin-home .proof-media .pin-slider__track,
.pin-home .proof-media .pin-slider__slide {
	height: 100%;
}
.pin-home .proof-media .pin-slider__slide { aspect-ratio: auto; }
.pin-home .proof-copy h2 { font-size: 34px; }
.pin-home .proof-copy p { margin-top: 14px; color: var(--pin-ink-soft); line-height: 1.65; }
.pin-home .proof-copy .pin-btn { margin-top: 19px; }
.pin-home .quote-band { margin-top: 64px; text-align: center; max-width: 760px; margin-inline: auto; }
.pin-home .quote-band blockquote {
	font-family: var(--pin-serif);
	font-style: italic;
	font-size: 26px;
	color: var(--pin-ink);
	margin: 0;
	line-height: 1.4;
}
.pin-home .quote-band cite {
	display: block;
	margin-top: 13px;
	font-style: normal;
	font-size: 14px;
	color: var(--pin-ink-soft);
}
.pin-home .quote-band p.follow { margin-top: 19px; color: var(--pin-ink-soft); line-height: 1.6; }

/* ---------- Open industries teaser (network-wide, honest framing) ---------- */
.pin-home .oi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 19px; }
.pin-home .oi-head h2 { font-size: 32px; }
.pin-home .oi-head a { font-size: 14px; font-weight: 600; }
.pin-home .oi-note { color: var(--pin-ink-soft); font-size: 15px; max-width: 60ch; margin-bottom: 22px; line-height: 1.6; }

/* ---------- Testimonials ---------- */
.pin-home .t-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 19px;
}
.pin-home .t-card {
	background: #fff;
	border: 1px solid var(--pin-line);
	border-radius: var(--pin-radius-lg);
	padding: 22px;
}
.pin-home .t-card p.quote { color: var(--pin-ink); line-height: 1.6; font-size: 15px; }
.pin-home .t-who { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.pin-home .t-avatar {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--pin-garnet); color: var(--pin-paper);
	display: grid; place-items: center;
	font-family: var(--pin-serif); font-size: 14px; font-weight: 600;
	flex: none;
}
.pin-home .t-name { font-weight: 600; font-size: 14px; color: var(--pin-ink); }
.pin-home .t-co { font-size: 12px; color: var(--pin-ink-soft); }

/* ---------- Final CTA ---------- */
.pin-home .cta-band { text-align: center; }
.pin-home .cta-band h2 { font-family: var(--pin-serif); font-size: 40px; color: var(--pin-paper); }
.pin-home .cta-band p { color: #f0e2da; margin-top: 11px; }
.pin-home .cta-band .pin-cta-row { margin-top: 26px; }

@media (max-width: 900px) {
	.pin-home .hero-grid,
	.pin-home .proof-grid { grid-template-columns: 1fr; }
	.pin-home .diff-grid { grid-template-columns: repeat(2, 1fr); }
	.pin-home .t-grid { grid-template-columns: 1fr; }
	.pin-home .proof-media { order: -1; }
}
@media (max-width: 560px) {
	.pin-home .diff-grid { grid-template-columns: 1fr; }
	/* Fixed px replaced fluid clamp() sizing above — these are the
	   desktop-tuned values; without an override they'd carry over
	   unchanged and the hero heading would overflow narrow screens. */
	.pin-home .hero { padding-block: 56px 48px; }
	.pin-home .hero-grid { gap: 32px; }
	.pin-home .hero h1 { font-size: 35px; }
	.pin-home .finder-head h2 { font-size: 26px; }
	.pin-home .proof-copy h2 { font-size: 24px; }
	.pin-home .quote-band { margin-top: 40px; }
	.pin-home .quote-band blockquote { font-size: 20px; }
	.pin-home .oi-head h2 { font-size: 24px; }
	.pin-home .cta-band h2 { font-size: 27px; }
}