/**
 * 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;
}

/* -------------------------------------------------------------------------- */
/* 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 first card is flush with the container's left edge — no gutter, no gap —
 * then the row bleeds off the right. The heading sits in a centred, max-width
 * container (max-width = --container + 2 × --gutter), so this inset is the
 * container's own left margin: zero until the viewport exceeds that max width,
 * then the centred offset above it. At and below the design width the first card
 * touches the left edge of the section, exactly as asked.
 */
.menu-cats__viewport {
	overflow-x: auto;
	padding-inline-start: max(0px, calc((100% - var(--container) - var(--gutter) * 2) / 2));
	padding-inline-end: var(--gutter);
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: max(0px, calc((100% - var(--container) - var(--gutter) * 2) / 2));
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

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

.menu-cats__track {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.menu-cats__item {
	flex: 0 0 auto;
	width: 339px;
	scroll-snap-align: start;
}

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

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

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

.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) {
	.menu-cats__item {
		width: 260px;
	}

	.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. */
.story {
	display: grid;
	grid-template-columns: 1fr 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%;
	max-width: 628px;
}

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

.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: 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 {
	display: block;
	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%);
}

.fav-card__subtitle {
	margin: 0;
	font-size: 16px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	line-height: 1.4;
	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;
}

/*
 * The tile row is 1596px against a 1512px frame, so it hangs 42px past each
 * edge. Heights run 370 / 430 / 500 / 430 / 370 and every tile shares one
 * vertical centre line — hence align-items: center, not flex-end.
 */
.social__wall {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
	width: calc(100% + 84px);
	margin: 80px -42px 0;
	padding: 0;
}

.social__tile {
	flex: 0 0 300px;
}

.social__tile--1,
.social__tile--5 {
	height: 370px;
}

.social__tile--2,
.social__tile--4 {
	height: 430px;
}

.social__tile--3 {
	height: 500px;
}

.social__tile-inner {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: 12px;
}

.social__tile-inner img,
.social__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

/* A tile's clip is decorative: it must fill the frame exactly as the still did. */
.social__video {
	display: block;
}

a.social__tile-inner:hover img,
a.social__tile-inner:hover .social__video {
	transform: scale(1.05);
}

.social__handle {
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 8px 12px;
	border-radius: 20px;
	background: var(--c-charcoal);
	color: var(--c-white);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	line-height: 1.6;
}

/* Below the design width the fan becomes a scrollable strip. */
@media (max-width: 1200px) {
	.social__wall {
		overflow-x: auto;
		justify-content: flex-start;
		width: 100%;
		margin-inline: 0;
		padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.social__wall::-webkit-scrollbar {
		display: none;
	}

	.social__tile,
	.social__tile--1,
	.social__tile--2,
	.social__tile--3,
	.social__tile--4,
	.social__tile--5 {
		flex: 0 0 240px;
		height: 340px;
	}
}

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

.loc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 0;
	padding: 0;
}

.loc-card {
	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%);
}

.loc-card__media {
	overflow: hidden;
	aspect-ratio: 339 / 270;
}

.loc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.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 {
	width: 24px;
	height: 24px;
}

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

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

/* -------------------------------------------------------------------------- */
/* 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;
}

.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%;
	}
}