/**
 * Homepage sections 2–12.
 *
 * Split from front-page.css purely to keep each file readable; both are loaded
 * on the front page only. Section 1 (the hero) lives in front-page.css.
 *
 * Figma reference: frame "Home", 1512 × 7965. vw midpoints are computed against
 * 1512 so every clamp() maximum lands on the exact Figma value at 1512px.
 *
 *  2. Order strip
 *  3. Menu categories
 *  4. Marquee
 *  5. Story
 *  6. Signature drop
 *  7. Fan favourites
 *  8. Social wall
 *  9. Locations
 * 10. Franchise
 * 11. News
 * 12. Newsletter
 */

/* -------------------------------------------------------------------------- */
/* 2. Order strip                                                              */
/* -------------------------------------------------------------------------- */

/* Figma: 1512 × 66, white, everything centred on one row with a 24px gap. */
.order-strip {
	padding-block: 16px;
	background: var(--c-white);
}

.order-strip__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: center;
}

.order-strip__text {
	margin: 0;
	color: var(--c-purple);
	font-size: 20px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
}

.order-strip__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/*
 * On phones the two pills no longer fit side by side and ran off the right edge.
 * Stack them full-width under the centred "Ready to order?" line so they always
 * fit and stay aligned.
 */
@media (max-width: 600px) {
	.order-strip__inner {
		gap: 16px;
	}

	.order-strip__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	.order-strip__actions .btn {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------- */
/* 3. Menu categories                                                          */
/* -------------------------------------------------------------------------- */

/*
 * The card row is 2768px wide against a 1380px column, so it deliberately runs
 * off the right edge. A scroll-snapping overflow track gives that for free:
 * swipeable on touch, scrollable on desktop, and fully usable with JavaScript
 * disabled. carousel.js only adds the dots and keyboard support on top.
 */
/*
 * The card row is full-bleed: the first card is flush with the left edge of the
 * screen at every width, then the row bleeds off the right. (The heading above
 * still sits in the centred container; only the cards run edge to edge.)
 */
.menu-cats__viewport {
	overflow-x: auto;
	/*
	 * No side padding: the viewport is exactly as wide as the card track, so a
	 * whole number of cards (--cat-cards) fills it edge to edge with no half
	 * card peeking through at the right. Cards beyond the fold are revealed only
	 * by scrolling.
	 */
	padding-inline: 0;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.menu-cats__viewport::-webkit-scrollbar {
	display: none;
}

.menu-cats__track {
	display: flex;
	gap: var(--cat-gap, 8px);
	margin: 0;
	padding: 0;
	/*
	 * How many whole cards fill the viewport at this width. Every card width is
	 * derived from this one number so a whole number of cards is always visible
	 * — no half-card cut off at the right edge — and the rest bleed off to be
	 * revealed by scrolling. Overridden per breakpoint below.
	 */
	--cat-cards: 6;
}

.menu-cats__item {
	flex: 0 0 auto;
	width: calc((100% - (var(--cat-cards) - 1) * var(--cat-gap, 8px)) / var(--cat-cards));
	scroll-snap-align: start;
}

/* Big screen 6 → laptop 4 → tablet 3 → large phone 2 → phone 1. */
@media (max-width: 1600px) {
	.menu-cats__track {
		--cat-cards: 4;
	}
}

@media (max-width: 1024px) {
	.menu-cats__track {
		--cat-cards: 3;
	}
}

@media (max-width: 768px) {
	.menu-cats__track {
		--cat-cards: 2;
	}
}

@media (max-width: 640px) {
	.menu-cats__track {
		--cat-cards: 1;
	}

	/*
	 * One card per screen makes each one 390 × 541 on a phone — the whole viewport
	 * for a single tile, with nothing to show the row scrolls. Narrowing it leaves
	 * the next card peeking, which both cuts the card down to a sensible size and
	 * makes the carousel legible as one. The 339/470 ratio still governs height,
	 * so the artwork is never cropped.
	 */
	.menu-cats__item {
		width: min(78%, 300px);
	}
}

/* --- The card --- */

.cat-card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 339 / 470;
	border-radius: 12px;
	color: var(--c-white);
}

/*
 * 339/470 is the artwork's own ratio (720 × 998), so the frame and the photo
 * agree and `cover` shows each shot whole. The ratio is deliberately NOT
 * shortened at narrow widths: a landscape frame around a portrait photo crops
 * the top and bottom away — at 4/3 only about half the picture survived, which
 * cut the food off on phones. Fewer cards per row makes each card taller here,
 * and that is the trade that keeps every shot intact.
 */

.cat-card__media {
	position: absolute;
	inset: 0;
}

/*
 * Every card renders its photo identically: same box, same fit, no per-card
 * crop. The artwork is all 720 × 998, which is the card's own ratio, so `cover`
 * shows each shot whole rather than cropping into it.
 */
.cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

.cat-card:hover .cat-card__media img {
	transform: scale(1.05);
}

/*
 * The scrim behind the caption. Figma runs it diagonally — transparent at the
 * top-right, 70% black at the bottom-left — so it is an angled gradient rather
 * than a straight vertical one.
 */
.cat-card__body {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	background: linear-gradient(197deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 70%) 100%);
}

.cat-card__subtitle {
	margin: 0;
	font-size: 16px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.cat-card__title {
	margin: 0;
	font-size: 40px;
	font-weight: var(--fw-semibold);
	line-height: 1;
	text-transform: uppercase;
}

/* On a menu card the badge is pinned to the top-left of the card itself. */
.cat-card > .badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
}

/* --- Dots --- */

.menu-cats__dots {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
}

.menu-cats__dots:empty {
	display: none;
}

/* Figma's bullet row is 86 × 14 with a 10px gap, so each dot is 14px. */
.menu-cats__dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(51 51 51 / 25%);
	transition: background-color var(--duration) var(--ease);
}

.menu-cats__dot.is-active {
	background: var(--c-purple);
}

@media (max-width: 640px) {
	.cat-card__title {
		font-size: 28px;
	}
}

/* -------------------------------------------------------------------------- */
/* 4. Marquee                                                                  */
/* -------------------------------------------------------------------------- */

/*
 * The phrase list is printed twice and the track slides by exactly -50%: at the
 * end of the cycle the second copy sits where the first began, so the loop is
 * seamless however many phrases there are.
 */
.marquee {
	overflow: hidden;
	padding-block: 16px;
	background: var(--c-purple);
	color: var(--c-white);
}

.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee-scroll 30s linear infinite;
}

.marquee__list {
	display: flex;
	gap: 32px;
	align-items: center;
	margin: 0;
	padding: 0 32px 0 0;
}

.marquee__item {
	display: flex;
	gap: 32px;
	align-items: center;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The diamond separator that sits between phrases in the design. */
.marquee__item::after {
	content: "";
	width: 8px;
	height: 8px;
	background: currentcolor;
	transform: rotate(45deg);
}

@keyframes marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.marquee:hover .marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
	}
}

/* -------------------------------------------------------------------------- */
/* 5. Story                                                                    */
/* -------------------------------------------------------------------------- */

/*
 * Figma: a 1512 × 668 charcoal band split exactly in half.
 *
 * minmax(0, 1fr) rather than 1fr: a bare 1fr floors the column at the content's
 * min-content width, and the stats row inside is wider than half a phone — so
 * the band, and with it the page, was being forced past the viewport.
 */
.story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--c-charcoal);
	color: var(--c-white);
}

.story__media {
	position: relative;
	min-height: 400px;
}

.story__media img,
.story__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.story__body {
	display: flex;
	align-items: center;
	padding: clamp(48px, 6.35vw, 96px) clamp(24px, 4.2328vw, 64px); /* 96 / 64 */
}

.story__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	width: 100%;
	/* Without this the flex item's automatic minimum is its widest word. */
	min-width: 0;
	max-width: 628px;
}

/* Eyebrow + heading: one block, 8px apart, as in the Figma "Title" component. */
.story__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

.story__text {
	margin: 0;
	color: var(--c-cream);
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.story .stats {
	width: 100%;
	max-width: 570px;
}

@media (max-width: 900px) {
	.story {
		grid-template-columns: minmax(0, 1fr);
	}

	.story__media {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}

/* -------------------------------------------------------------------------- */
/* 6. Signature drop                                                           */
/* -------------------------------------------------------------------------- */

.signature__inner {
	display: grid;
	grid-template-columns: 610fr 790fr;
	gap: 48px;
	align-items: center;
}

.signature__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.signature__title-accent {
	color: var(--c-purple);
}

/* GeneralSans-MediumItalic in the design. */
.signature__tagline {
	margin: 0;
	color: var(--c-charcoal);
	font-size: 20px;
	font-style: italic;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.signature__text {
	margin: 0;
	color: var(--c-grey);
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.signature .stats {
	width: 100%;
	max-width: 570px;
}

/* --- Price + buttons --- */

.signature__buy {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
}

/*
 * No trailing margin: the row's 16px gap already provides the spacing. Adding a
 * margin on top of it pushed the row to 579px inside a 567px column, which
 * wrapped the buttons onto a second line and made the whole section 55px taller
 * than the design. Figma's row is 563px and fits exactly.
 */
.price {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.price__label {
	color: var(--c-charcoal);
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
	text-transform: uppercase;
}

.price__value {
	color: var(--c-charcoal);
	font-size: clamp(40px, 3.7037vw, 56px); /* 56 / 1512 */
	font-weight: var(--fw-bold);
	line-height: 1;
}

.signature__allergen {
	display: flex;
	gap: 4px;
	align-items: center;
	margin: 0;
	color: var(--c-grey);
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.signature__allergen-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

/* --- Product shot --- */

.signature__media {
	position: relative;
}

/* Figma places the shot with "fit" — contained, never cropped. */
.signature__media img,
.signature__media video {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.signature__badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	color: var(--c-charcoal);
}

.signature__badge .badge__icon {
	color: var(--c-charcoal);
}

@media (max-width: 900px) {
	.signature__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.signature__media {
		order: -1;
	}
}

/* -------------------------------------------------------------------------- */
/* 7. Fan favourites                                                           */
/* -------------------------------------------------------------------------- */

/*
 * Bento: one 686 × 548 card on the left, a 2×2 grid of 339 × 270 on the right,
 * 8px gutters. 686 + 8 + 686 = 1380 — the full content column.
 */
.bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 270px;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* The first card fills the whole left half. */
.bento__cell:first-child {
	grid-row: span 2;
	grid-column: span 2;
}

.fav-card {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: 12px;
	color: var(--c-white);
}

.fav-card__media {
	position: absolute;
	inset: 0;
}

.fav-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

.fav-card:hover .fav-card__media img {
	transform: scale(1.05);
}

.fav-card__body {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	padding: 16px;
	background: linear-gradient(197deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 70%) 100%);
}

/* The category is the card's headline now (the dish name was removed). */
.fav-card__subtitle {
	margin: 0;
	font-size: clamp(24px, 2.38vw, 34px);
	font-weight: var(--fw-bold);
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Figma sets these card titles in the semibold italic cut. */
.fav-card__title {
	margin: 0;
	font-size: 24px;
	font-style: italic;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.bento {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 220px;
	}

	.bento__cell:first-child {
		grid-row: span 1;
		grid-column: span 2;
	}
}

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

	.bento__cell:first-child {
		grid-column: span 1;
	}
}

/* -------------------------------------------------------------------------- */
/* 8. Social wall                                                              */
/* -------------------------------------------------------------------------- */

.social {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 6.35vw, 96px) clamp(48px, 5.5556vw, 84px);
	background: var(--c-off-white);
	isolation: isolate;
}

.social__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.5;
}

.social__bg img,
.social__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.social__intro {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	text-align: center;
}

.social__title {
	margin: 0;
}

.social__text {
	max-width: 570px;
	margin: 0;
	color: var(--c-charcoal);
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.social__links {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--c-purple);
	color: var(--c-white);
	transition:
		background-color var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

.social__link:hover {
	background: var(--c-purple-dark);
	transform: translateY(-3px);
}

.social__link svg {
	width: 32px;
	height: 32px;
}

/* -------------------------------------------------------------------------- */
/* 9. Locations                                                                */
/* -------------------------------------------------------------------------- */

/*
 * Horizontal scroller: the location cards sit in one row that scrolls sideways —
 * by dragging with the mouse (main.js data-drag-scroll), the trackpad, or the
 * wheel. Scroll-snap keeps a card aligned to the left edge after each nudge.
 */
.loc-grid {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;               /* Firefox */
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.loc-grid::-webkit-scrollbar {          /* Chrome/Safari/Edge */
	display: none;
}

.loc-grid.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;              /* free-scroll while dragging */
	user-select: none;
}

.loc-card {
	flex: 0 0 332px;
	scroll-snap-align: start;
	/*
	 * Contains its own absolutely positioned descendants, so the rail's overflow
	 * clips them along with the card. The sibling rails' cards (.cat-card,
	 * .stimeline__card) are all positioned for the same reason; this one was
	 * the exception.
	 */
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--c-cream);
	border-radius: 12px;
	background: var(--c-off-white);
	transition:
		transform var(--duration) var(--ease),
		box-shadow var(--duration) var(--ease);
}

.loc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgb(20 20 20 / 10%);
}

/* Store cards are text-only — the storefront photo was dropped from the card. */

.loc-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
	padding: 16px;
}

.loc-card__head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
}

.loc-card__name {
	margin: 0;
	color: var(--c-charcoal);
	font-size: 24px;
	font-style: italic;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-transform: none;
}

.loc-card__address {
	margin: 8px 0 0;
	color: var(--c-grey);
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.loc-card__map {
	flex-shrink: 0;
	color: var(--c-purple);
	transition: transform var(--duration) var(--ease);
}

.loc-card__map:hover {
	transform: scale(1.1);
}

.loc-card__map svg,
.loc-card__map-icon {
	width: 24px;
	height: 24px;
	display: block;
}

@media (max-width: 560px) {
	.loc-card {
		flex-basis: 78%;                /* one card + a peek of the next */
	}
}

/* -------------------------------------------------------------------------- */
/* 10. Franchise                                                               */
/* -------------------------------------------------------------------------- */

.franchise {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 6.35vw, 96px);
	background: var(--c-ink);
	color: var(--c-white);
	isolation: isolate;
}

.franchise__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.franchise__bg img,
.franchise__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma washes the photo with 60% black so the copy stays legible. */
.franchise__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 60%);
}

.franchise__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.franchise__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.franchise__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.franchise__text {
	margin: 0;
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.counters {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 0;
}

.counters__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.counters__value {
	margin: 0;
	font-size: clamp(32px, 3.1746vw, 48px); /* 48 / 1512 */
	font-weight: var(--fw-bold);
	line-height: 1.2;
}

.counters__label {
	font-size: 16px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

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

/* -------------------------------------------------------------------------- */
/* 11. News                                                                    */
/* -------------------------------------------------------------------------- */

.news__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}

/*
 * The second column holds the run of smaller stories. When only the featured one
 * is listed there is nothing to put there, so the grid drops to a single column
 * rather than leaving half the row empty.
 */
.news__grid--solo {
	grid-template-columns: 1fr;
}

.news__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.news-card {
	overflow: hidden;
	border-radius: 12px;
	background: var(--c-cream);
	transition: transform var(--duration) var(--ease);
}

.news-card:hover {
	transform: translateY(-3px);
}

.news-card__media {
	display: block;
	overflow: hidden;
	border-radius: 12px;
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

.news-card:hover .news-card__media img {
	transform: scale(1.04);
}

.news-card__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
	padding: 8px;
}

/* Meta + title travel together, 8px apart. */
.news-card__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.news-card__meta {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin: 0;
	color: var(--c-grey);
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.news-card__title {
	margin: 0;
	color: var(--c-charcoal);
	font-size: 24px;
	font-style: italic;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-transform: none;
}

.news-card__title a:hover {
	color: var(--c-purple);
}

/* --- The large card --- */

.news-card--feature {
	display: flex;
	flex-direction: column;
	gap: 10px; /* Figma's gap between the image and the caption block. */
	padding: 8px;
}

.news-card--feature .news-card__media {
	aspect-ratio: 666 / 370;
}

/* --- The stacked cards --- */

.news-card--row {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 10px;
	padding: 8px;
}

.news-card--row .news-card__media {
	aspect-ratio: 240 / 143;
}

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

@media (max-width: 560px) {
	.news-card--row {
		grid-template-columns: 1fr;
	}

	.news-card--row .news-card__media {
		aspect-ratio: 16 / 9;
	}
}

/* -------------------------------------------------------------------------- */
/* 12. Newsletter                                                              */
/* -------------------------------------------------------------------------- */

.newsletter {
	padding-block: clamp(40px, 4.2328vw, 64px); /* 64 / 1512 */
	background: var(--c-purple-dark);
	color: var(--c-white);
}

/* Badge on its own row, then the two columns, 8px apart — as in Figma. */
.newsletter__inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

/* The form's top edge lines up with the heading, so both columns start flush. */
.newsletter__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
	width: 100%;
}

.newsletter__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

/* No extra margin: the column's 8px gap is the whole spacing in the design. */
.newsletter__badge {
	padding: 8px 12px;
	border-radius: 20px;
	background: #7a5fcf;
	color: var(--c-charcoal);
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.newsletter__title {
	margin: 0;
}

.newsletter__subtitle {
	margin: 0;
	font-size: 24px;
	font-style: italic;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

.newsletter__text {
	margin: 0;
	font-size: 18px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.newsletter__form-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

/*
 * Figma nests the submit inside the input's pill: one 62px capsule with 8px of
 * padding on three sides and 24px on the left, where the text starts.
 */
.newsletter__form {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
	padding: 8px 8px 8px 24px;
	border: 2px solid var(--c-purple);
	border-radius: var(--radius-pill);
	background: var(--c-purple);
	transition: border-color var(--duration) var(--ease);
}

.newsletter__form:focus-within {
	border-color: var(--c-purple-light);
}

/*
 * Scoped to the form so it outweighs the base input[type="email"] rule in
 * main.css — an attribute selector out-specifies a bare class, which was making
 * the field render as a white pill inside the purple one.
 */
.newsletter__form .newsletter__input {
	flex: 1;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--c-white);
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.newsletter__form .newsletter__input::placeholder {
	color: rgb(255 255 255 / 75%);
	opacity: 1; /* Firefox dims placeholders by default. */
}

.newsletter__form .newsletter__input:focus {
	border: 0;
	outline: none;
}

.newsletter__submit {
	flex-shrink: 0;
}

.newsletter__note {
	margin: 0;
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
	text-align: right;
}

@media (max-width: 900px) {
	.newsletter__cols {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.newsletter__form-wrap {
		align-items: stretch;
	}

	.newsletter__note {
		text-align: left;
	}
}

@media (max-width: 480px) {
	.newsletter__form {
		flex-direction: column;
		gap: 12px;
		padding: 12px;
		border-radius: 24px;
	}

	.newsletter__input {
		padding-inline: 12px;
	}

	.newsletter__submit {
		width: 100%;
	}
}