/* ============================================================================
   Costco97 — front page (from Costco97 Home v2.dc.html)
   ========================================================================== */

/* ---- Section scaffolding ---- */
.c97h-section { background: #fff; padding: 84px 0; scroll-margin-top: 60px; }
.c97h-section--wash { background: var(--c97-wash); }
.c97h-center { text-align: center; }

.c97h-kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c97-blue); margin-bottom: 14px; }
.c97h-kicker--light { color: rgba(255,255,255,.72); font-size: 11px; letter-spacing: .14em; margin-bottom: 12px; }

.c97h-h2 { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -.012em; color: var(--c97-ink); }
.c97h-h2--xl { font-size: 44px; letter-spacing: -.014em; }
.c97h-headsub { margin: 10px 0 0; font-size: 21px; font-weight: 300; color: var(--c97-muted-2); }
.c97h-headsub--center { max-width: 560px; margin: 12px auto 44px; }

.c97h-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.c97h-seeall { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 500; color: var(--c97-blue); background: var(--c97-blue-tint); border: 1px solid #d7e5f5; border-radius: var(--c97-r-pill); padding: 9px 18px; white-space: nowrap; }
.c97h-seeall:hover { background: var(--c97-blue-tint-2); text-decoration: none; }
.c97h-seeall span { font-size: 18px; line-height: 1; }
@keyframes c97nudge { 0%,100% { transform: translateX(0); } 12% { transform: translateX(7px); } 26% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 54% { transform: translateX(-3px); } 68% { transform: translateX(3px); } 82% { transform: translateX(-1px); } }
.see-all.in-view { animation: c97nudge 1.15s ease-in-out .25s 1; }

/* ---- Hero ---- */
.c97h-hero { background: var(--c97-wash); }
.c97h-hero__inner { max-width: 1080px; margin: 0 auto; padding: 88px 22px 84px; text-align: center; }
.c97h-hero .c97h-kicker { letter-spacing: .16em; margin-bottom: 22px; }
.c97h-h1 { margin: 0; font-size: 74px; line-height: 1; font-weight: 600; letter-spacing: -.035em; color: var(--c97-ink); white-space: nowrap; }
.c97h-sub { margin: 26px auto 0; max-width: 650px; font-size: 21px; line-height: 1.45; font-weight: 300; color: var(--c97-ink); }
.c97h-97 { font-weight: 400; }
.c97h-subscribe { margin-top: 30px; }
.c97h-subscribe__note { font-size: 13px; color: var(--c97-muted); margin-top: 12px; }
.c97-beehiiv { max-width: 460px; margin: 0 auto; }
.c97-beehiiv iframe { width: 100%; display: block; background: transparent; }

/* Hero brief cards */
.c97h-brief { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; text-align: left; }
.c97h-brief__card { display: block; color: inherit; background: #fff; border-radius: var(--c97-r-md); overflow: hidden; box-shadow: rgba(0,0,0,.06) 0 6px 20px -8px; transition: transform .18s ease, box-shadow .18s ease; }
.c97h-brief__card:hover { transform: translateY(-4px); box-shadow: rgba(0,0,0,.14) 0 14px 34px -12px; text-decoration: none; }
.c97h-brief__img { aspect-ratio: 16 / 10; background: #eef1f5; overflow: hidden; }
.c97h-brief__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c97h-brief__body { padding: 20px; }
.c97h-tag { display: inline-block; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: 4px 9px; }
.c97h-brief__title { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--c97-ink); }
.c97h-brief__price { margin-top: 6px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--c97-ink); }
.c97h-brief__price span { color: var(--c97-blue); }
.c97h-brief__meta { font-size: 14px; color: var(--c97-muted); }
.c97h-brief__desc { margin-top: 6px; font-size: 15px; color: var(--c97-muted-2); line-height: 1.4; }

/* ---- Deal grid (shared by .97s and New at Costco) ---- */
.c97h-dealgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; margin-top: 44px; }
.c97h-deal { display: block; color: inherit; }
.c97h-deal:hover { text-decoration: none; }
.c97h-deal[hidden] { display: none; }
.c97h-deal__img { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--c97-wash); transition: transform .35s cubic-bezier(.33,1,.68,1); }
.c97h-deal:hover .c97h-deal__img { transform: translateY(-6px); }
.c97h-deal__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c97h-deal__name { margin-top: 16px; font-size: 14px; color: var(--c97-ink); line-height: 1.3; }
.c97h-deal__price { margin-top: 6px; font-size: 19px; font-weight: 600; color: var(--c97-ink); }
.c97h-deal__price span { color: var(--c97-blue); }
.c97h-deal__price--plain { font-size: 17px; }
.c97h-deal__store { margin-top: 3px; font-size: 12px; color: var(--c97-muted); }
.c97h-newpill { display: inline-block; margin-top: 16px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c97-muted-2); background: var(--c97-fill); padding: 3px 9px; border-radius: var(--c97-r-pill); }
.c97h-newpill + .c97h-deal__name { margin-top: 10px; }
.c97h-empty { padding: 64px; text-align: center; color: var(--c97-muted); font-size: 19px; font-weight: 300; }

/* ---- Price codes ---- */
.c97h-codes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.c97h-code { padding: 36px 32px; background: #fff; border-radius: var(--c97-r-md); }
.c97h-code__num { font-size: 40px; font-weight: 600; letter-spacing: -.02em; color: var(--c97-ink); }
.c97h-code__num span { color: var(--c97-blue); }
.c97h-code__name { margin-top: 14px; font-size: 19px; font-weight: 600; color: var(--c97-ink); }
.c97h-code p { margin: 6px 0 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--c97-muted-2); }
.c97h-codes__cta { margin-top: 40px; padding: 13px 26px; font-size: 17px; }
.c97h-codes__cta span { font-size: 19px; line-height: 1; }

/* ---- Coupon book + Markdown Monday pair ---- */
.c97h-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 72px; padding-bottom: 72px; }
.c97h-paircard { border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.c97h-paircard--book { background: var(--c97-blue-tint); border: 1px solid #dbe4f0; }
.c97h-paircard--mm { background: var(--c97-blue); border: 1px solid var(--c97-blue-press); color: #fff; }
.c97h-paircard__img { width: 100%; aspect-ratio: 3 / 2; background-position: center; background-size: cover; }
.c97h-paircard__body { padding: 30px 40px 36px; display: flex; flex-direction: column; flex: 1; }
.c97h-paircard--book h3 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.012em; line-height: 1.08; color: var(--c97-ink); }
.c97h-paircard--book p { margin: 12px 0 0; font-size: 19px; font-weight: 300; color: var(--c97-ink); line-height: 1.45; }
.c97h-paircard__lead { margin: 0; max-width: 400px; font-size: 18px; font-weight: 300; color: #fff; line-height: 1.45; }
.c97h-paircard__lead strong { font-weight: 400; }
.c97h-paircard__ctas { display: flex; gap: 18px; align-items: center; margin-top: auto; padding-top: 24px; }
.c97h-textlink { color: var(--c97-blue); font-size: 17px; }
.c97h-textlink--light { color: #fff; }
.c97h-mmstats { display: flex; align-items: center; gap: 26px; margin: 20px 0 2px; }
.c97h-mmstat { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.c97h-mmstat__label { font-size: 13px; color: rgba(255,255,255,.72); margin-top: 3px; }
.c97h-mmstats__div { width: 1px; height: 36px; background: rgba(255,255,255,.28); }

/* ---- Blog grid ---- */
.c97h-bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.c97h-blogcard { display: block; color: inherit; }
.c97h-blogcard:hover { text-decoration: none; }
.c97h-blogcard__img { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #e2e2e5; }
.c97h-blogcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c97h-blogcard h3 { margin: 10px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--c97-ink); }
.c97h-blogcard p { margin: 8px 0 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--c97-muted-2); }
.c97h-blogcard__meta { margin-top: 12px; font-size: 12px; color: var(--c97-muted); }

/* ---- Recalls ---- */
.c97h-recalls { margin-top: 32px; border-top: 1px solid var(--c97-line); }
.c97h-recall { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--c97-line); color: inherit; }
.c97h-recall:hover { text-decoration: none; }
.c97h-recall:hover .c97h-recall__title { color: var(--c97-blue); }
.c97h-recall__left { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.c97h-recall__label { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c97-red); width: 96px; }
.c97h-recall__label span { width: 6px; height: 6px; border-radius: 50%; background: var(--c97-red); flex: none; }
.c97h-recall__title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--c97-ink); }
.c97h-recall__reason { margin-top: 3px; font-size: 15px; font-weight: 300; color: var(--c97-muted-2); }
.c97h-recall__meta { flex: none; text-align: right; font-size: 12px; color: var(--c97-muted); }

/* ---- Black subscribe moment ---- */
.c97h-black { background: #000; scroll-margin-top: 60px; padding: 96px 0; }
.c97h-black__count { font-size: 72px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--c97-wash); }
.c97h-black h2 { margin: 16px 0 0; font-size: 40px; font-weight: 600; letter-spacing: -.012em; color: var(--c97-wash); }
.c97h-black p { margin: 14px auto 0; max-width: 520px; font-size: 21px; font-weight: 300; color: #a1a1a6; }
.c97h-black__form { margin-top: 32px; }
.c97h-black__note { font-size: 12px !important; color: var(--c97-muted-2) !important; margin-top: 16px !important; }

/* ---- Community ---- */
.c97h-ghostbtn { display: inline-block; background: transparent; color: var(--c97-blue); border: 1px solid var(--c97-blue); border-radius: var(--c97-r-pill); padding: 12px 24px; font-size: 17px; margin-top: 26px; }
.c97h-ghostbtn:hover { background: var(--c97-blue-tint); text-decoration: none; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.c97h-dealgrid { grid-template-columns: repeat(3, 1fr); }
	.c97h-pair, .c97h-brief { grid-template-columns: 1fr; }
	.c97h-bloggrid, .c97h-codes { grid-template-columns: repeat(2, 1fr); }
	.c97h-h1 { font-size: 62px; white-space: normal; }
}
@media (max-width: 640px) {
	.c97h-dealgrid { grid-template-columns: repeat(2, 1fr); }
	.c97h-bloggrid, .c97h-codes { grid-template-columns: 1fr; }
	.c97h-h1 { font-size: 44px; }
	.c97h-recall { flex-direction: column; align-items: flex-start; gap: 8px; }
	.c97h-recall__left { flex-direction: column; align-items: flex-start; gap: 5px; }
	.c97h-recall__meta { text-align: left; }
	.c97h-black__count { font-size: 48px; }
}
@media (max-width: 430px) {
	.c97h-dealgrid { grid-template-columns: 1fr; }
}