/* ---------------------------------------------------------------------------
   Epic Snackbox.

   Cobalt frame, white content. The wordmark is white letterforms with a blue
   extrusion, so it cannot sit on a light background — the header has to carry
   the brand colour. Everything between header and footer is white, which is
   also what product photography shot on white wants.

   The seam between the two is a torn paper edge, lifted from the reference
   site. It is that site's one strong idea and it does the same job the sibling
   brand's awning scallops do: it says "this is a real place" in one gesture.

   Palette sampled from the live site: cobalt #233B9E from the hero, the
   extrusion range from the logo itself, near-blacks from the theme.
   --------------------------------------------------------------------------- */

/* Bungee for headings: squared, signage-built letterforms that echo the hard
   geometry of the wordmark. Titan One was the closer match to the logo's
   roundness and read too soft — closer to a children's cereal than to the
   cartoon-monster artwork the site is built on.

   Bungee is very wide, so it is display only. Anything small and uppercase —
   nav, chips, card labels, buttons — uses Barlow Condensed, which stays legible
   at 10px where Bungee would be a smear. */
@font-face {
	font-family: 'Bungee';
	src: url('/assets/fonts/bungee.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow Condensed';
	src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow Condensed';
	src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

:root {
	--cobalt: #233b9e;
	--cobalt-deep: #1a2d7a;
	--cobalt-lift: #3040a0;
	--cobalt-bright: #5060c0;
	--crimson: #a7144c;
	--ink: #232425;
	--ink-soft: #2f2f30;
	--grey: #6b7280;
	--grey-light: #f5f5f5;
	--paper: #ffffff;

	/* Headlines only. */
	--display: 'Bungee', 'Poppins', system-ui, sans-serif;
	/* Everything small and uppercase: nav, chips, labels, buttons, prices. */
	--ui: 'Barlow Condensed', 'Oswald', system-ui, sans-serif;
	--body: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* Bungee sets wide and tall. Headlines need pulling in or they sprawl. */
.hero h1, .build-head h1, .band h2, .section-head h2, .co-h1, .saving-block h2 {
	letter-spacing: -0.01em;
	line-height: 1.05;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--body);
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--cobalt); }

/* -- the artwork --------------------------------------------------------

   Three panels of the brand's own illustration — cartoon snacks with googly
   eyes, monochrome cobalt — each with a real torn paper edge photographed into
   it. Hero tears along the bottom, the mid band tears top and bottom, the
   footer tears along the top.

   An earlier pass drew the tear as an inline SVG. It was a fair imitation and
   entirely wrong: the actual edge is a photograph of torn paper, with fibre and
   shadow, and it is the thing that makes the site look made rather than
   generated. Use the artwork.
   ------------------------------------------------------------------------- */

.art {
	background-color: var(--cobalt);
	background-repeat: no-repeat;
	background-size: cover;
	/* Anchoring matters more than framing here. `cover` crops whichever axis
	   overflows, and centring it crops equally top and bottom — which throws
	   away the torn edge, the one part of the artwork that has to survive. So
	   each panel is pinned to the edge that carries its tear. */
	background-position: center;
}

/* Hero tears along its bottom: pin the bottom, let the top crop. */
.art--tear-bottom { background-position: center bottom; }

/* Footer tears along its top: pin the top. */
.art--tear-top { background-position: center top; }

/* The mid band tears on BOTH edges, so nothing may be cropped vertically. Its
   height is therefore set by the artwork's own aspect ratio rather than by its
   content, and the content centres inside whatever that gives. */
.art--tear-both {
	background-size: 100% 100%;
	aspect-ratio: 1950 / 712;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Text sits on a busy illustration, so it needs its own contrast rather than
   relying on the art staying dark where the words happen to fall. */
.art-scrim {
	background:
		radial-gradient(ellipse at 50% 45%, rgba(10, 20, 70, 0.72) 0%, rgba(10, 20, 70, 0.35) 55%, transparent 78%);
}

/* -- header -------------------------------------------------------------- */

.site-head {
	position: relative;
	background-color: #080f28;
	background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)), url('/assets/images/epic-weird-hero-1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* The hero art tears along its bottom edge, so the header sits flush above it
   with continuous artwork and the two read as one field. */
.site-head + .hero { margin-top: 0; }

.head-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}

.brand img { display: block; height: 46px; width: auto; }

.head-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	font-family: var(--ui);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.head-nav a { color: #fff; text-decoration: none; opacity: 0.92; }
.head-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

.nav-cta {
	background: #fff;
	color: var(--cobalt) !important;
	padding: 0.6rem 1.1rem;
	border-radius: 6px;
	opacity: 1 !important;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
}

.nav-cta:hover { text-decoration: none !important; transform: translateY(-1px); }

/* -- hero ---------------------------------------------------------------- */

.hero {
	position: relative;
	color: #fff;
	/* Bottom padding clears the torn edge baked into the artwork, so type never
	   lands on the tear. */
	padding: 4.5rem 0 7rem;
	text-align: center;
	background-image: url('/assets/images/epic-weird-hero-1.jpg');
	/* Tall enough that the bottom-anchored crop still shows illustration above
	   the tear rather than tear alone. */
	min-height: 460px;
}

@media (max-width: 640px) {
	.hero { padding: 3rem 0 4.5rem; }
}

.hero h1 {
	margin: 0 0 0.85rem;
	font-family: var(--display);
	font-size: clamp(1.6rem, 4.4vw, 2.9rem);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-shadow: 3px 3px 0 var(--cobalt-deep);
}

.hero p {
	max-width: 46ch;
	margin: 0 auto 1.75rem;
	font-size: 1.05rem;
	line-height: 1.6;
	opacity: 0.94;
}

.hero-actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

.btn {
	display: inline-block;
	font-family: var(--ui);
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.85rem 1.6rem;
	border-radius: 8px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn--solid { background: #fff; color: var(--cobalt); box-shadow: 0 4px 0 rgba(0,0,0,0.25); }
.btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); }
.btn:hover { transform: translateY(-2px); }
.btn--solid:hover { box-shadow: 0 6px 0 rgba(0,0,0,0.25); }

/* -- the mid band --------------------------------------------------------

   The middle artwork tears on both edges, so it works as a full-bleed divider
   between two white sections — the site's rhythm is white, art, white, art.
   ------------------------------------------------------------------------- */

.band {
	position: relative;
	color: #fff;
	text-align: center;
	padding: 2rem 0;
	background-image: url('/assets/images/epic-weird-mid-1950.jpg');
	/* Floor for narrow screens, where the aspect ratio alone would leave a band
	   too short to hold its own copy. */
	min-height: 300px;
}

.band h2 {
	margin: 0 0 0.6rem;
	font-family: var(--display);
	font-size: clamp(1.3rem, 3.4vw, 2rem);
	text-shadow: 3px 3px 0 var(--cobalt-deep);
}

.band p { max-width: 44ch; margin: 0 auto 1.5rem; font-size: 1rem; line-height: 1.6; opacity: 0.95; }

@media (max-width: 640px) {
	.band { padding: 1.5rem 0; }
	/* Below this the ratio gives a band shorter than its content, so the ratio
	   is dropped and the tears are stretched slightly instead of lost. */
	.art--tear-both { aspect-ratio: auto; min-height: 340px; }
}

/* -- sections ------------------------------------------------------------ */

.section { padding: 3rem 0; }
.section--tint { background: var(--grey-light); }

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.section-head h2 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.15rem, 2.6vw, 1.6rem);
	color: var(--ink);
}

.section-head a {
	font-family: var(--ui);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cobalt);
}

.section-head a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* -- product cards ------------------------------------------------------- */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.25rem;
}

.card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid #e6e8ef;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
	transform: translateY(-4px);
	border-color: var(--cobalt);
	box-shadow: 0 10px 24px rgba(35, 59, 158, 0.16);
}

.card-img {
	aspect-ratio: 1;
	background: #fafafa;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; }

.card-body { padding: 0.75rem 0.85rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }

.card-brand {
	font-family: var(--ui);
	font-size: 0.68rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--grey);
}

.card-title {
	font-size: 0.86rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-price {
	margin-top: auto;
	padding-top: 0.4rem;
	font-family: var(--ui);
	font-size: 1.1rem;
	color: var(--cobalt);
}

.card-was { font-size: 0.8rem; color: var(--grey); text-decoration: line-through; margin-left: 0.35rem; }

/* -- brand tiles --------------------------------------------------------- */

.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }

.brand-tile {
	display: block;
	padding: 1.1rem 1rem;
	background: #fff;
	border: 2px solid #e6e8ef;
	border-radius: 10px;
	text-decoration: none;
	text-align: center;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.brand-tile:hover { border-color: var(--cobalt); transform: translateY(-2px); }

.brand-tile strong {
	display: block;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1rem;
	color: var(--ink);
	margin-bottom: 0.2rem;
}

.brand-tile span { font-size: 0.78rem; color: var(--grey); }

/* -- bundles ------------------------------------------------------------- */

.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }

.bundle {
	position: relative;
	padding: 1.5rem;
	background: var(--cobalt);
	color: #fff;
	border-radius: 14px;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 6px 0 var(--cobalt-deep);
	transition: transform 0.15s ease;
}

.bundle:hover { transform: translateY(-3px); }
.bundle h3 { margin: 0 0 0.35rem; font-family: var(--display); font-size: 1.35rem; }
.bundle p { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.5; opacity: 0.9; }
.bundle .price { font-family: var(--ui); font-weight: 700; font-size: 1.7rem; }
.bundle .kind {
	position: absolute; top: 0.9rem; right: 0.9rem;
	font-family: var(--ui); font-size: 0.7rem; letter-spacing: 0.08em;
	text-transform: uppercase; background: rgba(255,255,255,0.18);
	padding: 0.25rem 0.5rem; border-radius: 4px;
}

.empty-note {
	padding: 2rem;
	text-align: center;
	color: var(--grey);
	background: #fff;
	border: 2px dashed #d8dbe6;
	border-radius: 12px;
}

/* -- product detail ------------------------------------------------------ */

.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem 0; }
.pdp-img { background: #fafafa; border: 2px solid #e6e8ef; border-radius: 14px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pdp-img img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.pdp h1 { margin: 0.4rem 0 0.6rem; font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.7rem); line-height: 1.2; }
.pdp-brand { font-family: var(--ui); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.pdp-price { font-family: var(--ui); font-weight: 700; font-size: 2.1rem; color: var(--cobalt); margin: 0.5rem 0 1.25rem; }
.pdp-stock { font-size: 0.88rem; color: var(--grey); margin-bottom: 1.25rem; }
.pdp-desc { font-size: 0.95rem; line-height: 1.7; color: var(--ink-soft); }

/* -- footer -------------------------------------------------------------- */

.site-foot {
	color: #fff;
	margin-top: 0;
	background: linear-gradient(180deg, #142468 0%, #0c1642 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.foot-inner { padding: 4rem 1.5rem 2.5rem; text-align: center; }
.foot-logo { height: 40px; width: auto; margin-bottom: 1rem; }
.foot-links { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.25rem; flex-wrap: wrap; }
.foot-links a { color: #fff; text-decoration: none; font-family: var(--ui); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.9; transition: color 0.12s ease; }
.foot-links a:hover { opacity: 1; color: #ff3b70; text-decoration: none; }
.foot-fine { margin: 0; font-size: 0.8rem; line-height: 1.7; opacity: 0.75; }
.foot-dev { display: inline-block; margin-top: 0.35rem; padding: 0.15rem 0.5rem; background: rgba(255,255,255,0.15); border-radius: 4px; font-size: 0.72rem; }

@media (max-width: 780px) {
	.pdp { grid-template-columns: 1fr; gap: 1.5rem; }
	.head-nav { gap: 1rem; font-size: 0.82rem; }
	.brand img { height: 36px; }
}

@media (max-width: 560px) {
	.head-inner { flex-wrap: wrap; }
	.head-nav { width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   The box builder.
   --------------------------------------------------------------------------- */

.build-head {
	color: #ffffff;
	text-align: center;
	padding: 3.5rem 0 4.5rem;
	background: linear-gradient(135deg, #1f38a8 0%, #12226e 100%);
	position: relative;
}

.build-head h1 {
	margin: 0 0 0.5rem;
	font-family: var(--display);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	text-shadow: none;
	color: #ffffff;
	letter-spacing: -0.01em;
}

.build-head p { margin: 0 0 1.5rem; opacity: 0.94; font-size: 1.05rem; }

.tier-strip {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.tier-strip li {
	background: rgba(255, 255, 255, 0.14);
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	padding: 0.5rem 0.9rem;
	font-family: var(--ui);
	line-height: 1.2;
}

.tier-strip strong { display: block; font-size: 1.15rem; }
.tier-strip span { font-size: 0.78rem; opacity: 0.9; }

.build {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 2rem;
	align-items: start;
	padding: 2.5rem 1.5rem 3rem;
}

/* -- the shelf -- */

.shelf-filters { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

.chip {
	font-family: var(--ui);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	border: 2px solid #e0e3ee;
	color: var(--ink);
	background: #fff;
}

.chip:hover { border-color: var(--cobalt); }
.chip.is-on { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 1rem; }

.pick {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 2px solid #e6e8ef;
	border-radius: 12px;
	padding: 0.6rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* An item already in the box should be obvious at a glance while scrolling. */
.pick.is-in {
	border-color: var(--cobalt);
	box-shadow: 0 0 0 3px rgba(35, 59, 158, 0.12);
}

.pick-img { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #fafafa; border-radius: 8px; overflow: hidden; }
.pick-img img { width: 100%; height: 100%; object-fit: contain; padding: 0.35rem; }

.pick-brand { margin: 0.5rem 0 0.1rem; font-family: var(--ui); font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey); }
.pick-title { margin: 0 0 0.5rem; font-size: 0.78rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.pick-price { font-family: var(--ui); font-size: 0.95rem; color: var(--cobalt); }

.pick-qty { display: flex; align-items: center; gap: 0.2rem; }

.qty-btn {
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.15rem; font-weight: 700; line-height: 1;
	border: 2px solid #d0d5e5; background: #fff; color: var(--ink);
	border-radius: 8px; cursor: pointer; user-select: none;
	transition: all 0.12s ease;
}

.qty-btn:hover {
	border-color: var(--cobalt);
	background: #f0f4ff;
	color: var(--cobalt);
	transform: scale(1.06);
}

.qty-btn--add { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.qty-btn--add:hover { background: var(--cobalt-bright); border-color: var(--cobalt-bright); color: #fff; }
.qty { min-width: 20px; text-align: center; font-family: var(--ui); font-size: 1rem; font-weight: 700; color: var(--cobalt-deep); }

/* -- the crate -- */

/* Sticky while it fits. A crate taller than the viewport cannot be sticky —
   the top pins, the bottom falls off the screen, and the total and the checkout
   button become permanently unreachable. build.js measures it and adds
   `is-tall` when that happens, which hands the crate back to normal flow so
   scrolling the page reveals the rest of it. */
.build-crate { position: sticky; top: 1rem; }
.build-crate.is-tall { position: static; }

.crate {
	background: #fff;
	border: 2px solid #e6e8ef;
	border-radius: 16px;
	padding: 1.25rem;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.crate-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.85rem; }
.crate-head h2 { margin: 0; font-family: var(--display); font-size: 1.35rem; color: var(--cobalt); }
.crate-count { font-family: var(--ui); font-size: 0.82rem; color: var(--grey); }

.crate-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
	gap: 0.4rem;
	margin-bottom: 0.85rem;
}

.slot {
	aspect-ratio: 1;
	border: 2px dashed #d5d9e8;
	border-radius: 8px;
	background: #fbfbfd;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.slot.is-full {
	background: #ffffff;
	border: 2px solid var(--cobalt-bright);
	box-shadow: 0 0 0 1.5px var(--cobalt), 0 2px 5px rgba(16, 64, 235, 0.15);
	transform: scale(1.04);
}

.slot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 2px;
	display: block;
	border-radius: 6px;
}

.crate-nudge {
	font-family: var(--ui); font-size: 0.85rem; font-weight: 700;
	color: var(--cobalt); margin: 0.75rem 0 0.35rem;
}

.crate-nudge.is-max { color: #0b7a44; }

.crate-bar { height: 8px; background: #eef0f8; border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.crate-bar span {
	display: block; height: 100%; width: 0%;
	background: linear-gradient(90deg, var(--cobalt), var(--cobalt-bright));
	border-radius: 4px; transition: width 0.25s ease;
}

/* No max-height: the whole box is listed, however long. Somebody checking what
   they picked should not have to scroll a panel inside a page to do it.
   Rows are tightened instead, which buys back most of the space a cap would
   have saved. */
.crate-lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.crate-lines li { display: grid; grid-template-columns: auto 1fr auto 1.2rem; gap: 0.4rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid #f0f1f6; font-size: 0.8rem; }

.cl-stepper {
	display: inline-flex; align-items: center; gap: 0.15rem;
	background: #f0f3fa; border: 1px solid #d8deee; border-radius: 6px; padding: 1px 3px;
}

.cl-step-btn {
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.95rem; font-weight: 700; line-height: 1;
	border: 0; background: #ffffff; color: var(--ink);
	border-radius: 4px; cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
}

.cl-step-btn:hover { background: var(--cobalt); color: #ffffff; transform: scale(1.08); }
.cl-step-btn--add:hover { background: var(--cobalt-bright); }
.cl-qty-val { font-family: var(--ui); font-size: 0.85rem; font-weight: 700; min-width: 16px; text-align: center; color: var(--cobalt-deep); }

.cl-qty { font-family: var(--ui); color: var(--grey); }
.cl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-price { font-family: var(--ui); font-weight: 600; }
.cl-x { border: 0; background: none; color: var(--grey); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0; margin-left: 0.2rem; }
.cl-x:hover { color: var(--crimson); }
.crate-empty { color: var(--grey); font-size: 0.82rem; padding: 0.75rem 0; border: 0; }

.crate-sums { margin: 0 0 1rem; font-size: 0.86rem; }
.crate-sums div { display: flex; justify-content: space-between; padding: 0.22rem 0; }
.crate-sums dt, .crate-sums dd { margin: 0; }
.crate-sums .is-off { color: #0b7a44; }
.crate-sums .crate-total { border-top: 2px solid #eceef6; margin-top: 0.35rem; padding-top: 0.5rem; font-family: var(--ui); font-weight: 700; font-size: 1.3rem; color: var(--cobalt); }
[data-crate-shipping].is-free { color: #0b7a44; font-weight: 700; }

.crate-cta { width: 100%; text-align: center; background: var(--cobalt); color: #fff; box-shadow: 0 4px 0 var(--cobalt-deep); border: 0; cursor: pointer; }
.crate-cta[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: 0 4px 0 #c9cde0; background: #9aa2c4; }
.crate-fine { margin: 0.6rem 0 0; font-size: 0.74rem; color: var(--grey); text-align: center; }

@media (max-width: 900px) {
	.build { grid-template-columns: 1fr; }
	/* On a phone the crate belongs at the bottom, not pinned over the shelf. */
	.build-crate { position: static; order: 2; }
	.build-shelf { order: 1; }
}

/* -- how saving works ----------------------------------------------------- */

.saving { max-width: 780px; padding: 2.5rem 1.5rem 3rem; }

.saving-campaign {
	margin: 0 0 1.75rem;
	padding: 0.85rem 1.1rem;
	background: #fff6d9;
	border: 2px solid var(--crimson);
	border-radius: 10px;
	font-size: 0.95rem;
}

.saving-block { margin-bottom: 2.25rem; }

.saving-block h2 {
	margin: 0 0 0.75rem;
	font-family: var(--display);
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	color: var(--cobalt);
}

.saving-block p { margin: 0 0 0.85rem; line-height: 1.7; color: var(--ink-soft); }

/* The claim that this is the only discount is the one people will not believe
   without being told twice, so it gets its own frame. */
.saving-block--flag {
	padding: 1.25rem 1.4rem;
	background: var(--grey-light);
	border-left: 5px solid var(--cobalt);
	border-radius: 0 10px 10px 0;
}

.saving-tiers { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }

.saving-tiers li {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	padding: 0.7rem 1rem;
	background: #fff;
	border: 2px solid #e6e8ef;
	border-radius: 10px;
}

.st-items { font-family: var(--ui); font-size: 1.05rem; min-width: 6.5rem; }
.st-pct { font-family: var(--ui); font-size: 1.25rem; color: var(--cobalt); }
.st-boost { font-size: 0.78rem; color: var(--crimson); }

.saving-zones { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.35rem; }

.saving-zones li {
	display: flex;
	gap: 0.85rem;
	align-items: baseline;
	padding: 0.5rem 0.8rem;
	background: #fff;
	border: 1px solid #e6e8ef;
	border-radius: 8px;
	font-size: 0.85rem;
}

.sz-rate { font-family: var(--ui); color: var(--cobalt); min-width: 4rem; }
.sz-states { color: var(--grey); letter-spacing: 0.03em; }

.saving-note { font-size: 0.88rem; color: var(--grey); line-height: 1.65; }
.saving-cta { text-align: center; margin: 2rem 0 0; }
.saving-cta .btn { background: var(--cobalt); color: #fff; box-shadow: 0 4px 0 var(--cobalt-deep); }

.crate-fine a { color: var(--cobalt); }

/* -- box cards ------------------------------------------------------------ */

.boxcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }

.boxcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--cobalt);
	color: #fff;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 6px 0 var(--cobalt-deep);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.boxcard:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--cobalt-deep); }

.boxcard-kind {
	position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2;
	font-family: var(--ui); font-size: 0.62rem; letter-spacing: 0.09em;
	text-transform: uppercase; background: rgba(255,255,255,0.2);
	padding: 0.24rem 0.5rem; border-radius: 4px;
}

/* The face of a box is what is in it. Six tiles on white, inside the cobalt
   card, so the assortment reads at a glance rather than one snack standing in
   for five others. */
.boxcard-grid-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: #dfe3f2;
	padding: 2px;
}

/* Fewer than six still wants a full face, so the grid narrows rather than
   leaving holes. */
.boxcard-grid-inner[data-count="1"] { grid-template-columns: 1fr; }
.boxcard-grid-inner[data-count="2"],
.boxcard-grid-inner[data-count="4"] { grid-template-columns: repeat(2, 1fr); }

.boxthumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: #fff;
	overflow: hidden;
}

.boxthumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.35rem; }

/* When a box holds more than the grid shows, the last tile says so rather than
   the card quietly under-representing it. */
.boxthumb-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(35, 59, 158, 0.82);
	color: #fff;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 1.1rem;
}

.boxcard:hover .boxthumb img { transform: scale(1.05); }
.boxthumb img { transition: transform 0.2s ease; }

.boxcard-body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.boxcard-body strong { font-family: var(--display); font-size: 0.95rem; line-height: 1.25; }
.boxcard-tag { font-size: 0.8rem; line-height: 1.45; opacity: 0.88; }
.boxcard-price { margin-top: auto; padding-top: 0.5rem; font-family: var(--ui); font-size: 1.35rem; }
.boxcard-price s { font-size: 0.8rem; opacity: 0.65; margin-left: 0.4rem; }

/* -- how it works --------------------------------------------------------- */

.how-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; counter-reset: how; }
.how-list li { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.how-list strong { font-family: var(--display); font-size: 0.95rem; color: var(--ink); }
.how-n {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--cobalt); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--ui); font-size: 1rem; margin-bottom: 0.35rem;
}
.how-list--num { counter-reset: none; }
.how-list--num li { flex-direction: row; gap: 0.5rem; align-items: baseline; }

.tier-strip--hero { margin-top: 1.5rem; }

.bundle-h2 { font-family: var(--display); font-size: 1.2rem; margin: 0 0 0.85rem; color: var(--cobalt); }
.bundle-was { font-size: 1rem; color: var(--grey); margin-left: 0.5rem; }
.bundle-save { color: #0b7a44; font-size: 0.9rem; margin: 0 0 0.5rem; }

/* -- Bundle detail page layout compacting ----------------------------------- */
.pdp--bundle {
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 2rem;
	padding: 1.5rem 0 2rem;
	align-items: start;
}

.pdp-info {
	position: sticky;
	top: 1.5rem;
	background: #fff;
	border: 2px solid #e6e8ef;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.bundle-contents {
	min-width: 0;
}

.bundle-card-grid {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.85rem;
}

.bundle-card-grid .card-body {
	padding: 0.55rem 0.65rem 0.7rem;
}

.bundle-card-grid .card-title {
	font-size: 0.82rem;
	line-height: 1.3;
}

.bundle-card-grid .card-price {
	font-size: 0.95rem;
	padding-top: 0.25rem;
}

@media (max-width: 860px) {
	.pdp--bundle {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		padding: 1rem 0;
	}
	.pdp-info {
		position: static;
		padding: 1.25rem;
	}
	.bundle-card-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 0.65rem;
	}
}

/* -- box badge, add buttons, checkout -------------------------------------- */

.nav-box { display: inline-flex; align-items: center; gap: 0.4rem; }

.box-badge {
	min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.22); border-radius: 999px;
	font-size: 0.75rem; transition: background 0.2s ease, transform 0.2s ease;
}

.box-badge.is-on { background: #fff; color: var(--cobalt); font-weight: 700; transform: scale(1.06); }

.pdp-add { border: 0; cursor: pointer; background: var(--cobalt); color: #fff; box-shadow: 0 4px 0 var(--cobalt-deep); }
.pdp-add.is-added { background: #0b7a44; box-shadow: 0 4px 0 #075c33; }
.pdp-hint { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--grey); line-height: 1.6; }
.pdp-hint a { color: var(--cobalt); }

.checkout { padding: 2.5rem 1.5rem 3rem; max-width: 1060px; }
.co-h1 { font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.7rem); color: var(--cobalt); margin: 0 0 1.5rem; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
.co-form h2 { font-family: var(--display); font-size: 1.15rem; margin: 0 0 1rem; }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.co-wide { grid-column: 1 / -1; }
.co-fields label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; color: var(--grey); }
.co-fields input, .co-fields select {
	padding: 0.6rem 0.7rem; font-size: 0.95rem; font-family: inherit; color: var(--ink);
	border: 2px solid #e0e3ee; border-radius: 8px; background: #fff;
}
.co-fields input:focus, .co-fields select:focus { outline: none; border-color: var(--cobalt); }
.co-note { margin: 1rem 0 0; font-size: 0.82rem; color: var(--grey); }

.co-pending {
	margin: 0.85rem 0 0; padding: 0.7rem 0.85rem;
	background: #fff6d9; border: 2px dashed var(--crimson); border-radius: 8px;
	font-size: 0.78rem; line-height: 1.55; color: var(--ink-soft);
}

@media (max-width: 860px) {
	.co-grid { grid-template-columns: 1fr; }
	.co-fields { grid-template-columns: 1fr; }
}

/* -- unavailable lines in the box ----------------------------------------- */

/* A sold-out pick is shown rather than removed. Dropping it silently changed
   somebody's total with no explanation, which reads as the site losing their
   choice or moving the price. */
.cl-sold_out, .cl-gone { opacity: 0.62; }
.cl-sold_out .cl-title, .cl-gone .cl-title { text-decoration: line-through; text-decoration-color: var(--grey); }
.cl-sold_out .cl-price, .cl-gone .cl-price {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--crimson);
	text-decoration: none;
}

.cl-note {
	display: block;
	font-style: normal;
	font-size: 0.68rem;
	line-height: 1.35;
	color: var(--crimson);
	text-decoration: none;
	margin-top: 0.1rem;
}

.cl-limited .cl-note { color: #b45309; }
.cl-limited .cl-title { text-decoration: none; }

/* The remove button is the action on these rows, so it stops being incidental. */
.cl-sold_out .cl-x, .cl-gone .cl-x { color: var(--crimson); font-weight: 700; }

/* -- top announcement bar & header redesign -- */

.top-announcement {
	background: #0b1542;
	color: #ffffff;
	font-family: var(--ui);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 0.45rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-head {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #142468;
	color: #ffffff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.site-head .head-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

.site-head .head-nav {
	display: flex;
	align-items: center;
	gap: 1.8rem;
	font-family: var(--ui);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.site-head .head-nav a {
	color: #ffffff;
	text-decoration: none;
	opacity: 0.92;
	padding-bottom: 3px;
	border-bottom: 2.5px solid transparent;
	transition: all 0.15s ease;
}

.site-head .head-nav a:hover,
.site-head .head-nav a.is-active {
	color: #ff3b70;
	opacity: 1;
	border-bottom-color: #ff3b70;
	text-decoration: none;
}

.head-actions {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.head-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	opacity: 0.9;
	transition: all 0.15s ease;
}

.head-icon:hover {
	color: #ff3b70;
	opacity: 1;
	transform: scale(1.1);
}

.head-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	opacity: 0.95;
	transition: all 0.15s ease;
}

.head-cart:hover {
	color: #ff3b70;
	transform: scale(1.05);
}

.head-cart .cart-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: #ff3b70;
	color: #ffffff;
	font-family: var(--ui);
	font-size: 0.7rem;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 99px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* -- cobalt hero section -- */

.hero--purple,
.hero--cobalt {
	position: relative;
	background-color: #0b1a56;
	background-image: url('/assets/images/hero-bg-banner.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	color: #ffffff;
	padding: 5rem 0 6.5rem;
	overflow: hidden;
	min-height: 520px;
	display: flex;
	align-items: center;
}

/* Subtle background doodle illustration texture */
.hero--purple::before,
.hero--cobalt::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 24px 24px;
	opacity: 0.6;
	pointer-events: none;
}

.hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	position: relative;
	z-index: 2;
}

@media (max-width: 900px) {
	.hero-inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
}

.hero-content h1 {
	font-family: var(--display);
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	line-height: 1.05;
	margin: 0 0 1rem;
	letter-spacing: -0.01em;
}

.pink-text {
	color: #ff3b70;
}

.hero-sub {
	font-size: 1.15rem;
	line-height: 1.45;
	margin: 0 0 2rem;
	opacity: 0.92;
	max-width: 480px;
}

@media (max-width: 900px) {
	.hero-sub { margin-left: auto; margin-right: auto; }
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

@media (max-width: 900px) {
	.hero-actions { justify-content: center; }
}

.btn--pink {
	background: #ff3b70;
	color: #ffffff !important;
	border: 0;
	border-radius: 99px;
	padding: 0.9rem 1.8rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(255, 59, 112, 0.35);
	transition: all 0.15s ease;
}

.btn--pink:hover {
	background: #e62b5d;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(255, 59, 112, 0.45);
	text-decoration: none;
}

.btn--ghost-white {
	background: transparent;
	color: #ffffff !important;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 99px;
	padding: 0.85rem 1.8rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: all 0.15s ease;
}

.btn--ghost-white:hover {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
	text-decoration: none;
}

.hero-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--ui);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	opacity: 0.92;
}

@media (max-width: 900px) {
	.hero-rating { justify-content: center; }
}

.hero-rating .stars {
	color: #fbbf24;
	letter-spacing: 0.1em;
	font-size: 1.1rem;
}

.hero-graphic {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.hero-graphic-inner {
	position: relative;
	max-width: 520px;
	width: 100%;
}

.hero-box-img {
	width: 100%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3));
}

/* Floating pink starburst badge on hero box graphic */
.starburst-badge {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 100px;
	height: 100px;
	background: #ff3b70;
	clip-path: polygon(50% 0%, 63% 10%, 80% 4%, 82% 21%, 98% 24%, 90% 40%, 100% 55%, 88% 68%, 93% 85%, 77% 87%, 71% 100%, 55% 92%, 40% 100%, 31% 87%, 14% 88%, 18% 70%, 4% 58%, 14% 43%, 3% 27%, 20% 23%, 22% 6%, 38% 12%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	text-align: center;
	transform: rotate(12deg);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
	animation: floatPulse 3s ease-in-out infinite alternate;
}

@keyframes floatPulse {
	0% { transform: rotate(12deg) translateY(0); }
	100% { transform: rotate(15deg) translateY(-6px); }
}

.starburst-badge span {
	font-family: var(--ui);
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
}

.starburst-badge strong {
	font-family: var(--display);
	font-size: 1.25rem;
	line-height: 1;
	margin: 1px 0;
}

/* -- floating value props bar -- */

.value-props-wrapper {
	position: relative;
	z-index: 10;
	margin-top: -2.5rem;
	margin-bottom: 2rem;
}

.value-props-bar {
	background: #ffffff;
	border-radius: 16px;
	padding: 1.25rem 1.75rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.value-props-bar { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}

@media (max-width: 540px) {
	.value-props-bar { grid-template-columns: 1fr; }
}

.vp-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.vp-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #edf2ff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.vp-text {
	display: flex;
	flex-direction: column;
}

.vp-text strong {
	font-family: var(--ui);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #142468;
	margin-bottom: 2px;
}

.vp-text span {
	font-size: 0.76rem;
	color: var(--grey);
	line-height: 1.25;
}

/* -- section head center with sparks -- */

.section-head--center {
	text-align: center;
	margin-bottom: 2.2rem;
}

.headline-spark {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	justify-content: center;
}

.headline-spark h2 {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	color: #142468;
	letter-spacing: 0.01em;
}

.sparkle {
	color: #ff3b70;
	font-weight: 700;
	font-size: 1.3rem;
}

.section-head--center p {
	margin: 0.4rem 0 0;
	color: var(--grey);
	font-size: 0.95rem;
}

/* -- multi-color theme boxcards -- */

.boxcard--theme-0 { background: #1f38a8; box-shadow: 0 6px 0 #12226e; } /* Cobalt Blue */
.boxcard--theme-1 { background: #ff3b70; box-shadow: 0 6px 0 #cb2351; } /* Pink / Coral */
.boxcard--theme-2 { background: #0284c7; box-shadow: 0 6px 0 #0369a1; } /* Bright Blue */
.boxcard--theme-3 { background: #ea580c; box-shadow: 0 6px 0 #c2410c; } /* Deep Orange */

.boxcard--theme-0:hover { box-shadow: 0 9px 0 #12226e; }
.boxcard--theme-1:hover { box-shadow: 0 9px 0 #cb2351; }
.boxcard--theme-2:hover { box-shadow: 0 9px 0 #0369a1; }
.boxcard--theme-3:hover { box-shadow: 0 9px 0 #c2410c; }

.boxcard-badge {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	z-index: 3;
	font-family: var(--ui);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: #ffffff;
	color: #142468;
	padding: 0.22rem 0.55rem;
	border-radius: 99px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* -- subscription page redesign -- */

.hero--sub {
	position: relative;
	background: linear-gradient(135deg, #1f38a8 0%, #12226e 100%);
	color: #ffffff;
	padding: 4.5rem 0 5.5rem;
	overflow: hidden;
}

.sub-hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: center;
}

@media (max-width: 900px) {
	.sub-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 2.5rem; }
}

.sub-badge {
	display: inline-block;
	font-family: var(--ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	padding: 0.35rem 0.85rem;
	border-radius: 99px;
	margin-bottom: 1.2rem;
}

.sub-hero-content h1 {
	font-family: var(--display);
	font-size: clamp(2.2rem, 4.5vw, 3.5rem);
	line-height: 1.08;
	margin: 0 0 1rem;
}

.sub-hero-desc {
	font-size: 1.1rem;
	line-height: 1.5;
	margin: 0 0 1.75rem;
	opacity: 0.92;
	max-width: 500px;
}

@media (max-width: 900px) {
	.sub-hero-desc { margin-left: auto; margin-right: auto; }
}

.sub-perks {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

@media (max-width: 900px) {
	.sub-perks { justify-content: center; }
}

.perk-tag {
	font-family: var(--ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	padding: 0.35rem 0.75rem;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.sub-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--ui);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	opacity: 0.94;
}

@media (max-width: 900px) {
	.sub-rating { justify-content: center; }
}

.sub-rating .stars {
	color: #fbbf24;
	letter-spacing: 0.1em;
	font-size: 1.1rem;
}

.sub-hero-media {
	display: flex;
	justify-content: center;
}

.sub-media-card {
	position: relative;
	max-width: 500px;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
	border: 4px solid rgba(255, 255, 255, 0.2);
}

.sub-box-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* -- subscription plans grid -- */

.section--plans {
	padding: 4.5rem 0;
	background: #f8fafc;
}

.sub-plans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	align-items: stretch;
	margin-top: 1.5rem;
}

@media (max-width: 960px) {
	.sub-plans-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

.plan-card {
	position: relative;
	background: #ffffff;
	border-radius: 18px;
	padding: 2.2rem 1.8rem;
	border: 2px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
	transition: all 0.2s ease;
}

.plan-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	border-color: #cbd5e1;
}

.plan-card--featured {
	border-color: #ff3b70;
	box-shadow: 0 10px 30px rgba(255, 59, 112, 0.15);
	transform: scale(1.03);
}

@media (max-width: 960px) {
	.plan-card--featured { transform: none; }
}

.plan-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: #ff3b70;
	color: #ffffff;
	font-family: var(--ui);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.85rem;
	border-radius: 99px;
	box-shadow: 0 3px 8px rgba(255, 59, 112, 0.3);
}

.plan-badge--alt {
	background: #1f38a8;
	box-shadow: 0 3px 8px rgba(31, 56, 168, 0.3);
}

.plan-head {
	text-align: center;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #f1f5f9;
	margin-bottom: 1.5rem;
}

.plan-name {
	display: block;
	font-family: var(--display);
	font-size: 1.15rem;
	color: #142468;
	margin-bottom: 0.6rem;
}

.plan-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.2rem;
	font-family: var(--ui);
}

.plan-price strong {
	font-size: 2.4rem;
	color: #142468;
	line-height: 1;
}

.plan-price span {
	font-size: 0.9rem;
	color: var(--grey);
	font-weight: 700;
}

.plan-unit {
	display: block;
	font-size: 0.82rem;
	color: var(--grey);
	margin-top: 0.4rem;
}

.plan-features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	font-size: 0.9rem;
	color: var(--ink);
}

.plan-features li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.plan-action {
	margin-top: auto;
}

.plan-action .btn {
	width: 100%;
	text-align: center;
}

.btn--sub-outline {
	background: #ffffff;
	color: #142468 !important;
	border: 2px solid #142468;
	border-radius: 99px;
	padding: 0.85rem 1.5rem;
	font-family: var(--ui);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: all 0.15s ease;
}

.btn--sub-outline:hover {
	background: #142468;
	color: #ffffff !important;
	text-decoration: none;
}

/* -- sub steps grid -- */

.sub-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
	margin-top: 2rem;
}

@media (max-width: 900px) {
	.sub-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 500px) {
	.sub-steps-grid { grid-template-columns: 1fr; }
}

.sub-step-item {
	background: #ffffff;
	border-radius: 14px;
	padding: 1.75rem 1.25rem;
	text-align: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
	border: 1px solid #eef2f6;
}

.sub-step-item .step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #ff3b70;
	color: #ffffff;
	font-family: var(--display);
	font-size: 1.1rem;
	margin-bottom: 1rem;
	box-shadow: 0 4px 10px rgba(255, 59, 112, 0.25);
}

.sub-step-item strong {
	display: block;
	font-family: var(--ui);
	font-size: 0.98rem;
	font-weight: 700;
	color: #142468;
	margin-bottom: 0.4rem;
	letter-spacing: 0.03em;
}

.sub-step-item p {
	margin: 0;
	font-size: 0.82rem;
	color: var(--grey);
	line-height: 1.4;
}

/* -- faq grid -- */

.section--faq {
	background: #ffffff;
	padding: 4rem 0;
}

.faq-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
	margin-top: 2rem;
}

@media (max-width: 768px) {
	.faq-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

.faq-card {
	background: #f8fafc;
	border-radius: 14px;
	padding: 1.5rem 1.75rem;
	border: 1px solid #e2e8f0;
}

.faq-card strong {
	display: block;
	font-family: var(--ui);
	font-size: 1.02rem;
	font-weight: 700;
	color: #142468;
	margin-bottom: 0.5rem;
	letter-spacing: 0.02em;
}

.faq-card p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--ink-soft);
	line-height: 1.55;
}

/* -- sample box breakdowns styling -- */

.section--samples {
	background: #f8fafc;
	padding: 4.5rem 0;
	border-top: 1px solid #e2e8f0;
}

.sample-disclaimer-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	background: #fff8e6;
	border: 2px dashed #f59e0b;
	border-radius: 12px;
	padding: 1rem 1.4rem;
	margin: 1.5rem auto 0;
	max-width: 780px;
	text-align: left;
	color: #92400e;
	font-size: 0.86rem;
	line-height: 1.5;
}

.disclaimer-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 1px;
}

.sample-disclaimer-banner strong {
	color: #78350f;
	font-family: var(--ui);
	letter-spacing: 0.04em;
	font-size: 0.9rem;
}

.sample-box-block {
	background: #ffffff;
	border-radius: 18px;
	padding: 2rem;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	margin-bottom: 3rem;
}

.sample-box-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid #f1f5f9;
	flex-wrap: wrap;
	gap: 1rem;
}

.sample-box-title h3 {
	margin: 0 0 0.25rem;
	font-family: var(--display);
	font-size: 1.3rem;
	color: #142468;
}

.sample-count {
	font-family: var(--ui);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--grey);
	letter-spacing: 0.04em;
}

.sample-box-pricing {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.sample-plan-price {
	font-family: var(--ui);
	font-size: 1.2rem;
	font-weight: 700;
	color: #142468;
}

.sample-val-badge {
	background: #142468;
	color: #ffffff;
	font-family: var(--ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.75rem;
	border-radius: 99px;
}

.sample-val-badge--pink {
	background: #ff3b70;
}

.btn--full {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

.plan-sample-link {
	display: block;
	text-align: center;
	margin-top: 0.75rem;
	font-family: var(--ui);
	font-size: 0.8rem;
	font-weight: 700;
	color: #142468;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.plan-sample-link:hover {
	opacity: 1;
	color: #ff3b70;
	text-decoration: underline;
}

.sample-box-foot {
	text-align: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #f1f5f9;
}

.btn--sm {
	padding: 0.55rem 1.1rem;
	font-size: 0.82rem;
}

/* -- ready-made cta banner below 3 plans -- */

.ready-made-cta-banner {
	margin-top: 3.5rem;
	background: #f1f5f9;
	border-radius: 20px;
	padding: 2.25rem 2rem;
	border: 1px solid #cbd5e1;
}

.ready-made-cta-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.ready-made-cta-text h3 {
	margin: 0 0 0.4rem;
	font-family: var(--display);
	font-size: 1.35rem;
	color: #142468;
}

.ready-made-cta-text p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--ink-soft);
}