/* Squarespell marketplace homepage — AppSumo/Envato-inspired merchandising system. */
.sqh5-home {
	--h5-canvas: var(--sq-paper);
	--h5-surface: var(--sq-sheet);
	--h5-soft: var(--sq-soft);
	--h5-line: var(--sq-line);
	--h5-text: var(--sq-ink);
	--h5-muted: var(--sq-muted);
	--h5-signal: var(--sq-signal);
	--h5-on-dark: var(--wp--preset--color--canvas);
	--h5-dark: var(--wp--preset--color--dark-canvas);
	--h5-dark-surface: var(--wp--preset--color--dark-surface);
	--h5-dark-line: var(--wp--preset--color--dark-border);
	--h5-dark-muted: var(--wp--preset--color--dark-muted);
	background: var(--h5-canvas);
	color: var(--h5-text);
}

.sqh5-home *, .sqh5-home *::before, .sqh5-home *::after { box-sizing: border-box; }
.sqh5-home a { color: inherit; }
.sqh5-shell { inline-size: min(1440px, calc(100% - clamp(28px, 5vw, 80px))); margin-inline: auto; }
.sqh5-section { padding-block: clamp(54px, 5vw, 76px); }

.sqh5-kicker {
	margin: 0;
	color: var(--h5-signal);
	font-size: var(--sq-t-eyebrow);
	font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-eyebrow);
	text-transform: uppercase;
}

.sqh5-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 36px;
	margin-block-end: clamp(28px, 3.5vw, 46px);
}

.sqh5-heading h2 {
	margin: 0;
	font-size: var(--sq-t-h1);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-h1);
	letter-spacing: var(--sq-ls-h1);
}

.sqh5-heading p {
	max-inline-size: 720px;
	margin: 15px 0 0;
	color: var(--h5-muted);
	font-size: var(--sq-t-p1);
	line-height: var(--sq-lh-body);
}

.sqh5-heading__end { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; }

.sqh5-heading__end > a,
.sqh5-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding-block-end: 4px;
	border-block-end: 1px solid currentColor;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	text-decoration: none;
}

.sqh5-heading__end > a svg, .sqh5-text-link svg { inline-size: 16px; block-size: 16px; }

/* Envato-inspired marketplace masthead, using original Squarespell content and art. */
.sqh5-promo {
	background: var(--h5-signal);
	color: var(--wp--preset--color--on-signal);
}

.sqh5-promo > div {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: 48px;
	font-size: var(--sq-t-p3);
	line-height: var(--sq-lh-eyebrow);
}

.sqh5-promo strong { font-weight: var(--sq-w-bold); }
.sqh5-promo a { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-weight: var(--sq-w-bold); text-underline-offset: 3px; }
.sqh5-promo svg { inline-size: 14px; block-size: 14px; }

.sqh5-hero {
	padding: clamp(20px, 1.9vw, 28px) 0;
	border-block-end: 1px solid var(--h5-line);
	background: var(--h5-canvas);
}

/*
 * Centred in the screenful, not tucked under the bar. The panels keep every dimension they
 * had; what changes is where the leftover height goes. The hero fills what is left of the
 * first screen below the sticky header and the announcement strip — 124px covers both with a
 * little slack, so the section can never be taller than the screen and push itself out of
 * view — and `align-content: center` splits the surplus evenly above and below instead of
 * dropping all of it underneath. `svh` so a phone's collapsing toolbar cannot resize it
 * mid-scroll; the cap keeps a very tall display from stranding the hero in a sea of canvas.
 * Desktop only: below 900px the panels stack and the hero is already taller than the screen.
 */
@media (min-width: 901px) {
	.sqh5-hero {
		display: grid;
		align-content: center;
		min-block-size: min(calc(100vh - 124px), 860px);
		min-block-size: min(calc(100svh - 124px), 860px);
	}
}

.sqh5-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.68fr) minmax(320px, .6fr);
	gap: clamp(24px, 1.8vw, 32px);
}

.sqh5-hero__story {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: clamp(380px, 26vw, 420px);
	overflow: hidden;
	border-radius: 24px;
	/* Restrained. The two blurred orbs, the 68% ringed ::before and its two spread
	   shadows are gone; what is left is a deep warm charcoal, one low-contrast tonal
	   sweep for depth, and a single warm glow held at 14% behind the card column so
	   the four floating cards stay the feature rather than competing with the paint. */
	background:
		radial-gradient(58% 62% at 76% 46%, color-mix(in srgb, var(--h5-signal) 14%, transparent) 0%, transparent 68%),
		linear-gradient(118deg, var(--h5-dark) 0 46%, color-mix(in srgb, var(--h5-dark-surface) 78%, var(--h5-dark)) 100%),
		var(--h5-dark);
	color: var(--h5-on-dark);
}

.sqh5-hero__copy {
	position: relative;
	z-index: 3;
	inline-size: 57%;
	padding: 0 clamp(28px, 3.2vw, 46px);
	padding-inline-end: 0;
	--h5-hero-h1: clamp(38px, 3.75vw, 50px);
}

.sqh5-hero__copy .sqh5-kicker { color: var(--h5-signal); }

.sqh5-hero__copy h1 {
	/* Was `10.5ch` — a measure that shrinks with the font size, so reducing the type
	   alone would have kept the four lines. Fixed at 460px, the shorter type gets a
	   wider line and settles at three. */
	max-inline-size: 460px;
	margin: 12px 0 0;
	font-size: var(--h5-hero-h1);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.045em;
}

.sqh5-hero__copy > p:last-child {
	max-inline-size: 470px;
	margin: 16px 0 0;
	color: var(--h5-dark-muted);
	font-size: clamp(14px, 1vw, 16px);
	line-height: 1.5;
}

.sqh5-hero__art { position: absolute; z-index: 2; inset: 0 0 0 auto; inline-size: 44%; pointer-events: none; }

.sqh5-hero__asset {
	position: absolute;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 12px;
	min-inline-size: 205px;
	padding: 12px;
	border: 1px solid color-mix(in srgb, var(--h5-on-dark) 18%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--h5-dark-surface) 88%, transparent);
	box-shadow: 0 24px 70px rgb(0 0 0 / 35%);
	backdrop-filter: blur(14px);
	/* The wrapper is pointer-events: none so the panel stays selectable behind it;
	   the cards themselves have to opt back in now that they are links. */
	pointer-events: auto;
	color: inherit;
	text-decoration: none;
	transition: border-color 140ms ease;
}

.sqh5-hero__asset:hover { border-color: color-mix(in srgb, var(--h5-signal) 55%, transparent); }

.sqh5-hero__asset:focus-visible {
	outline: 2px solid var(--h5-signal);
	outline-offset: 3px;
}

.sqh5-hero__asset > svg { grid-row: 1 / 3; inline-size: 40px; block-size: 40px; padding: 10px; border-radius: 11px; background: var(--h5-signal); color: var(--h5-dark); }
.sqh5-hero__asset strong { align-self: end; font-size: 15px; }
.sqh5-hero__asset small { align-self: start; color: var(--h5-dark-muted); font-size: 10px; }
/* Same stagger and same modest rotations, re-spaced for the shorter panel: four tops
   at 5/28/51/74% of ~415px leave a clear gap between each 72px card and the next. */
.sqh5-hero__asset--plugin { inset: 7.5% auto auto 50%; translate: calc(-50% + 20px) 0; transform: rotate(4deg); }
.sqh5-hero__asset--template { inset: 30.9% auto auto 50%; translate: calc(-50% - 20px) 0; transform: rotate(-4deg); }
.sqh5-hero__asset--extension { inset: 53.9% auto auto 50%; translate: calc(-50% + 20px) 0; transform: rotate(3deg); }
.sqh5-hero__asset--course { inset: 76% auto auto 50%; translate: calc(-50% - 20px) 0; transform: rotate(-2deg); }

.sqh5-hero-card {
	display: flex;
	flex-direction: column;
	min-block-size: clamp(340px, 26vw, 420px);
	padding: clamp(18px, 1.5vw, 22px);
	border: 1px solid var(--h5-line);
	border-radius: 24px;
	background: var(--h5-surface);
}

.sqh5-hero-card__label { margin: 0; color: var(--h5-signal); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.sqh5-hero-card h2 { margin: 8px 0 0; font-size: clamp(27px, 2.15vw, 35px); font-weight: 600; line-height: 1.01; letter-spacing: -.045em; }
.sqh5-hero-card ul { display: grid; gap: 0; margin: 12px 0 10px; padding: 0; border-block-start: 1px solid var(--h5-line); list-style: none; }
.sqh5-hero-card li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding-block: 6px; border-block-end: 1px solid var(--h5-line); }
.sqh5-hero-card li > span { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 9px; background: var(--h5-soft); color: var(--h5-signal); }
.sqh5-hero-card li > span svg { inline-size: 17px; block-size: 17px; }
.sqh5-hero-card li div { display: grid; gap: 2px; min-inline-size: 0; }
.sqh5-hero-card li strong { font-size: 12px; line-height: 1.3; }
.sqh5-hero-card li small { color: var(--h5-muted); font-size: 9px; line-height: 1.35; }
.sqh5-hero-card .sqh5-button { min-block-size: 48px; }

.sqh5-button {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-block-size: 54px;
	margin-block-start: auto;
	padding-inline: 18px;
	border-radius: 10px;
	background: var(--h5-text);
	color: var(--h5-canvas) !important;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-bold);
	text-decoration: none;
}

.sqh5-button svg { inline-size: 17px; block-size: 17px; }
.sqh5-button:hover, .sqh5-button:focus-visible { background: var(--h5-signal); color: var(--h5-surface) !important; }

/* ── Marketplace right now ────────────────────────────────────────────────────
   A compact discovery grid, not a second carousel — the Squarespell rail above
   already auto-scrolls, and this section deliberately shares nothing with it: no
   timer, no controls, no auto-advance.

   Every rule here is scoped under `.sqh5-inventory` on purpose. `.sqh5-product`
   and `.sqh5-product-grid` are also used by the Deals and Sponsored sections
   further down the page, so restyling them unscoped would silently redesign two
   sections this task must not touch. */
.sqh5-inventory { background: var(--h5-canvas); padding-block: clamp(72px, 6vw, 88px); }
.sqh5-inventory .sqh5-heading { margin-block-end: 24px; }

/* A tab bar on a rule, not a row of filled capsules. */
.sqh5-inventory .sqh5-tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	margin-block-end: 24px;
	padding-block-end: 0;
	border-block-end: 1px solid var(--h5-line);
	scrollbar-width: none;
}

.sqh5-inventory .sqh5-tabs::-webkit-scrollbar { display: none; }

.sqh5-inventory .sqh5-tabs button {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-block-size: 44px;
	padding: 0 14px;
	border: 0;
	/* The accent underline sits on the button, overlapping the bar's own rule. */
	border-block-end: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--h5-muted);
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	white-space: nowrap;
	cursor: pointer;
	transition: color 140ms ease, border-color 140ms ease;
}

.sqh5-inventory .sqh5-tabs button:hover { color: var(--h5-text); }
.sqh5-inventory .sqh5-tabs button:focus-visible { outline: 2px solid var(--h5-signal); outline-offset: -2px; }
.sqh5-inventory .sqh5-tabs button[aria-selected="true"] { border-block-end-color: var(--h5-signal); background: none; color: var(--h5-text); font-weight: var(--sq-w-bold); }
/* `hidden` has to beat the rail's own display, or a hidden panel keeps its cards in the
   accessibility tree and in the tab order while the visible rail scrolls. */
.sqh5-tabpanel[hidden] { display: none !important; }
.sqh5-inventory .sqh5-tabpanel { animation: sqh5-tabfade 150ms ease; }

@keyframes sqh5-tabfade { from { opacity: 0; } to { opacity: 1; } }

/* Four equal columns, scoped so the shared grid keeps its own behaviour elsewhere. */
/* A rail again, deliberately: the panel is the scroll viewport and the grid is the track.
   Four whole cards at desktop, advancing one at a time. Only the visible panel is ever
   driven — a hidden one is `display:none`, so it has no scroll box and no cards in the tab
   order. */
.sqh5-inventory .sqh5-tabpanel:not([hidden]) {
	overflow-anchor: none;
	overflow-x: auto;
	margin-inline: -4px;
	padding: 4px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 4px;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.sqh5-inventory .sqh5-tabpanel::-webkit-scrollbar { display: none; }
.sqh5-inventory .sqh5-product-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 54px) / 4); align-items: stretch; gap: 18px; }
.sqh5-inventory .sqh5-product { scroll-snap-align: start; }

/* Controls sit on the tab row, aligned to the track rather than the browser edge. */
.sqh5-tabrow { display: flex; align-items: flex-end; gap: 20px; margin-block-end: 24px; }
.sqh5-tabrow .sqh5-tabs { flex: 1 1 auto; margin-block-end: 0; }

/* No card overrides in this section. The canonical `.sq-tc` is 16:10, bordered and two-line
   on its own now, so every scoped patch that used to live here is redundant. */

@media (max-width: 1199px) {
	.sqh5-inventory .sqh5-product-grid { grid-auto-columns: calc((100% - 36px) / 3); }
}

@media (max-width: 899px) {
	.sqh5-inventory .sqh5-product-grid { grid-auto-columns: calc((100% - 18px) / 2); }
}

@media (max-width: 599px) {
	/* One swipeable row with snap and a peek of the next card. Manual only — no
	   timer, no arrows, nothing shared with the carousel above. */
	/* One whole card plus a peek of the next. The shared mobile rule turns the grid into its
	   own flex scroller for Deals and Sponsored; here the panel is the scroller, so the grid
	   stays a grid or the panel never overflows and the controller sees nothing to move. */
	.sqh5-inventory .sqh5-product-grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(86vw, 340px);
		gap: 12px;
		overflow: visible;
		padding: 0;
	}

	.sqh5-inventory .sqh5-product { flex: none; }
	.sqh5-tabrow { flex-direction: column; align-items: stretch; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.sqh5-inventory .sqh5-tabpanel { animation: none; }
	.sqh5-inventory .sqh5-tabs button { transition: none; }
}

.sqh5-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sqh5-product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sqh5-product-grid--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sqh5-product-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sqh5-product-grid--count-1 { grid-template-columns: minmax(0, 1fr); }
.sqh5-product { min-inline-size: 0; }
/* No surface of its own. The card was given a border and a 16px radius here that it does not
   have on /browse/, so the same product looked framed on the home page and unframed in the
   catalogue. The card component decides how a card looks; this only stretches it to fill its
   grid row. The `.sq-pc__media` and `.sq-pc__body` rules below it were for the retired card
   family and matched nothing. */
.sqh5-product > .sq-pc { block-size: 100%; }
.sqh5-product-grid--count-1 .sq-pc { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); min-block-size: 430px; }
.sqh5-product-grid--count-1 .sq-pc__media { min-block-size: 430px; aspect-ratio: auto; border-block-end: 0; border-inline-end: 1px solid var(--h5-line); }
.sqh5-product-grid--count-1 .sq-pc__body { padding: clamp(24px, 3vw, 38px); }

/* The owned-product area converts proven Squarespace demand without presenting the
   wider marketplace as a single-platform shop. */
.sqh5-originals {
	border-block: 1px solid var(--h5-line);
	background: var(--h5-surface);
}

/* ── Squarespell originals ────────────────────────────────────────────────────
   An ordinary light merchandising section. The dark showcase panel that used to
   wrap this — its charcoal gradient, 1px dark border, 24px radius, 46px padding
   and light-on-dark ink — is gone, along with every override that existed only to
   survive it. `.sqh5-orig` is now a plain block: the section's own light surface
   shows through, and the cards and savings row carry the structure. The cards are
   `Product_Card`'s own, so nothing here restyles `.sq-pc` — the section decides
   how wide a slide is, and lets a title use its second line. */
.sqh5-orig { min-inline-size: 0; }

.sqh5-orig__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 40px; margin-block-end: clamp(20px, 2vw, 28px); }
.sqh5-orig__intro { min-inline-size: 0; }
.sqh5-orig .sqh5-kicker { color: var(--h5-signal); }
.sqh5-orig__intro h2 { max-inline-size: 18ch; margin: 12px 0 0; font-size: clamp(30px, 3.1vw, 42px); line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h1); }
.sqh5-orig__intro > p:last-child { max-inline-size: 52ch; margin: 12px 0 0; color: var(--h5-muted); font-size: var(--sq-t-p2); line-height: var(--sq-lh-supporting); }
.sqh5-orig__tools { display: flex; align-items: center; gap: 16px; }
.sqh5-orig__all { display: inline-flex; align-items: center; gap: 8px; color: var(--h5-text); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); text-underline-offset: 4px; white-space: nowrap; }
.sqh5-orig__all svg { inline-size: 16px; block-size: 16px; transition: transform 180ms ease; }
.sqh5-orig__all:hover svg { transform: translateX(4px); }

/* The track scrolls, the page does not: `overflow-x` lives here and nowhere above it. */
.sqh5-orig__viewport { overflow-anchor: none; overflow-x: auto; margin-inline: -4px; padding: 4px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scroll-padding-inline-start: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.sqh5-orig__viewport::-webkit-scrollbar { display: none; }
.sqh5-orig__viewport:focus-visible { outline: 2px solid var(--h5-signal); outline-offset: 2px; }
.sqh5-orig__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4); align-items: stretch; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sqh5-orig__slide { display: flex; min-inline-size: 0; scroll-snap-align: start; }
/* The only card override in this section, and it is a wrapping rule rather than a design
   one: the global plugin card ellipsises its title on one line, which reads as a truncated
   fragment at this width. Scoped to the slide, so browse, search and every other grid keep
   the single line they were given. The clamp goes on the anchor, not the h3 — `text-wrap`
   from the site-wide heading rule is half of the `white-space` shorthand and would beat it. */

.sqh5-orig__slide > * { inline-size: 100%; }

/* The offer: an inline rail bounded by a rule, not a filled grey container. It sits below
   the track, aligned to it, and stays quieter than the products above it. */
.sqh5-orig-offer {
	display: grid;
	grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
	align-items: center;
	gap: 10px 28px;
	margin-block-start: clamp(16px, 1.6vw, 22px);
	padding-block: 16px;
	border-block: 1px solid var(--h5-line);
}

.sqh5-orig-offer__intro { display: grid; gap: 2px; min-inline-size: 0; }
.sqh5-orig-offer .sqh5-kicker { color: var(--h5-signal); }
.sqh5-orig-offer__head { margin: 0; color: var(--h5-text); font-size: var(--sq-t-p2); font-weight: var(--sq-w-bold); line-height: 1.25; }
.sqh5-orig-offer__scope { margin: 0; color: var(--h5-muted); font-size: var(--sq-t-p3); line-height: 1.35; }
.sqh5-orig-offer__tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sqh5-orig-offer__tiers li { display: grid; align-content: center; gap: 1px; min-block-size: 80px; padding: 10px 14px; border: 1px solid transparent; border-radius: 12px; }
.sqh5-orig-offer__tiers .is-popular { border-color: color-mix(in srgb, var(--h5-signal) 34%, var(--h5-line)); background: color-mix(in srgb, var(--h5-signal) 6%, var(--h5-surface)); }
.sqh5-orig-offer__badge { color: var(--h5-signal); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sqh5-orig-offer__count { color: var(--h5-muted); font-size: var(--sq-t-p3); }
/* Strong, but not the product price treatment — that pill belongs to a thing you buy. */
.sqh5-orig-offer__save { color: var(--h5-text); font-size: var(--sq-t-p2); font-weight: var(--sq-w-bold); line-height: 1.25; }
.sqh5-orig-offer__pct { color: var(--h5-muted); font-size: var(--sq-t-eyebrow); }
.sqh5-orig-offer__note { grid-column: 2; margin: 0; color: var(--h5-muted); font-size: var(--sq-t-p3); }

/* The honest inactive state: one line saying the offer exists and cannot be completed yet.
   No tier cells, because three live-looking discounts beside a warning is the confusion. */
.sqh5-orig-offer--pending {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 24px;
	padding-block: 14px;
}

.sqh5-orig-offer__label { grid-column: 1; margin: 0; color: var(--h5-signal); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sqh5-orig-offer__lede { grid-column: 1; margin: 0; color: var(--h5-text); font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); line-height: 1.3; }
.sqh5-orig-offer__status { grid-area: 1 / 2 / 3 / 3; align-self: center; margin: 0; padding: 5px 12px; border: 1px solid var(--h5-line); border-radius: 999px; background: var(--h5-canvas); color: var(--h5-muted); font-size: var(--sq-t-p3); white-space: nowrap; }

@media (max-width: 1279px) {
	.sqh5-orig__track { grid-auto-columns: calc((100% - 36px) / 3); }
}

@media (max-width: 899px) {
	.sqh5-orig__head { grid-template-columns: minmax(0, 1fr); }
	/* The link does not wrap and the three controls are a fixed 128px; below this width the
	   two together are wider than the shell, so the controls take their own line. */
	.sqh5-orig__tools { flex-wrap: wrap; gap: 12px 16px; }
	.sqh5-orig__track { grid-auto-columns: calc((100% - 18px) / 2); }
	.sqh5-orig-offer { grid-template-columns: minmax(0, 1fr); }
	.sqh5-orig-offer__note { grid-column: 1; }
}

@media (max-width: 599px) {
	/* One card plus a peek of the next, so the row reads as scrollable without controls. */
	.sqh5-orig__track { grid-auto-columns: 84%; }
	.sqh5-orig-offer__tiers { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.sqh5-orig-offer__tiers li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; min-block-size: 0; padding: 9px 12px; border-color: var(--h5-line); }
	.sqh5-orig-offer__badge { grid-column: 1 / -1; }
	.sqh5-orig-offer__pct { grid-column: 2; }
	.sqh5-orig-offer--pending { grid-template-columns: minmax(0, 1fr); }
	.sqh5-orig-offer__status { grid-area: auto; justify-self: start; margin-block-start: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.sqh5-orig__viewport { scroll-behavior: auto; }
	.sqh5-orig__all svg { transition: none; }
}

/* Outcomes and evidence use a deliberate asymmetrical composition. */
/* The pair was 1368px of a 1440px screen split 810/540, so the two panels were neither equal
   nor contained, and the shorter one left a 155px void under its last link. Equal columns, a
   narrower measure than the full-bleed sections above, and less vertical padding — the panels
   size to their content rather than to the viewport. */
/* ── Browse by platform ───────────────────────────────────────────────────────
   A discovery section, not a utility strip: the shared section header treatment the
   other homepage sections use, then six stocked platforms in a 3x2 grid. Everything
   is scoped under `.sqh5-platbar`, so `.sqh5-heading` keeps its own behaviour in the
   sections above and below. */
.sqh5-platbar { background: var(--h5-canvas); padding-block: clamp(56px, 5vw, 72px); }
.sqh5-platbar__head { margin-block-end: 32px; }
.sqh5-platbar .sqh5-kicker { margin: 0 0 12px; }
.sqh5-platbar__head h2 { max-inline-size: 18ch; }
.sqh5-platbar__head > div > p:not(.sqh5-kicker) { max-inline-size: 660px; }
.sqh5-plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sqh5-plat { min-inline-size: 0; }

/* One anchor per card, wrapping non-interactive content only: one tab stop, one
   destination, no nested anchor. */
/* Logo, copy, arrow on one row: stacking them pushed the card past 190px, well over the
   135-155px this section is specified at. The arrow still sits top-right because the items
   align to the top of the row while the row itself centres in the card. */
.sqh5-plat__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "mark copy go";
	align-items: start;
	align-content: center;
	column-gap: 16px;
	block-size: 100%;
	min-block-size: 142px;
	padding: 26px;
	border: 1px solid var(--h5-line);
	border-radius: 18px;
	background: var(--h5-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* Border, shadow and a 2px lift — nothing that changes the box, so hovering a card
   never nudges the row beside it. */
.sqh5-plat__link:hover {
	border-color: color-mix(in srgb, var(--h5-text) 55%, var(--h5-line));
	box-shadow: 0 3px 14px color-mix(in srgb, var(--h5-text) 8%, transparent);
	transform: translateY(-2px);
}

.sqh5-plat__link:focus-visible { outline: 2px solid var(--h5-signal); outline-offset: 3px; }
.sqh5-plat__mark { grid-area: mark; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border: 1px solid var(--h5-line); border-radius: 13px; background: var(--h5-canvas); }
.sqh5-plat__mark img { inline-size: 28px; block-size: 28px; object-fit: contain; }
.sqh5-plat__initial { color: var(--h5-muted); font-size: var(--sq-t-p2); font-weight: var(--sq-w-bold); }
.sqh5-plat__go { grid-area: go; inline-size: 18px; block-size: 18px; margin-block-start: 4px; color: var(--h5-muted); transition: transform 160ms ease; }
.sqh5-plat__link:hover .sqh5-plat__go { color: var(--h5-signal); transform: translateX(3px); }
.sqh5-plat__copy { grid-area: copy; display: grid; gap: 3px; min-inline-size: 0; }
.sqh5-plat__name { overflow: hidden; font-size: var(--sq-t-h4); font-weight: var(--sq-w-bold); line-height: 1.25; letter-spacing: var(--sq-ls-h4); text-overflow: ellipsis; white-space: nowrap; }
.sqh5-plat__count { color: var(--h5-text); font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); line-height: 1.3; }
/* Two short lines rather than an ellipsis: a platform's stocked types are the point of
   the card, so a fragment like "Plugins · Tem…" would be worse than a wrap. */
.sqh5-plat__types {
	display: -webkit-box;
	overflow: hidden;
	color: var(--h5-muted);
	font-size: var(--sq-t-p3);
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Tablet: two columns. Three would leave the type line about 190px, which is where
   "Plugins · Templates · Extensions" starts breaking into fragments. */
@media (max-width: 1180px) {
	.sqh5-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: still two columns, but the card is short enough that the logo row and the
   copy have to tighten rather than the grid dropping to one. */
@media (max-width: 700px) {
	.sqh5-platbar { padding-block: clamp(38px, 9vw, 52px); }
	.sqh5-platbar__head { margin-block-end: 24px; }
	.sqh5-platbar__head h2 { max-inline-size: none; }
	.sqh5-plats { gap: 12px; }
	.sqh5-plat__link {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "mark go" "copy copy";
		min-block-size: 0;
		row-gap: 12px;
		padding: 17px;
		border-radius: 16px;
	}

	.sqh5-plat__go { justify-self: end; margin-block-start: 0; }
	.sqh5-plat__mark { inline-size: 40px; block-size: 40px; border-radius: 11px; }
	.sqh5-plat__mark img { inline-size: 22px; block-size: 22px; }
	.sqh5-plat__go { inline-size: 16px; block-size: 16px; margin-block-start: 2px; }
	.sqh5-plat__name { font-size: var(--sq-t-p2); }
	.sqh5-plat__count { font-size: var(--sq-t-p3); }
	.sqh5-plat__types { -webkit-line-clamp: 3; }
}

/* Very narrow, or wherever two columns would collide: one card per row. */
@media (max-width: 359px) {
	.sqh5-plats { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.sqh5-plat__link, .sqh5-plat__go { transition: none; }
	.sqh5-plat__link:hover { transform: none; }
	.sqh5-plat__link:hover .sqh5-plat__go { transform: none; }
}
}

/* Paid and deal inventory is physically separated from editorial cards. */
.sqh5-commercial { border-block: 1px solid var(--h5-line); background: color-mix(in srgb, var(--h5-signal) 4%, var(--h5-canvas)); }
.sqh5-commercial__head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-block-end: 32px; }
.sqh5-commercial__head h2 { margin: 12px 0 0; font-size: var(--sq-t-h1); line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h1); }
.sqh5-commercial__head > p { max-inline-size: 330px; margin: 0; color: var(--h5-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); text-align: end; }
.sqh5-subhead { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-block-end: 16px; }
.sqh5-subhead h3 { margin: 0; font-size: var(--sq-t-h4); letter-spacing: var(--sq-ls-h2); }
.sqh5-subhead a, .sqh5-subhead span { color: var(--h5-muted); font-size: var(--sq-t-p3); }
.sqh5-subhead p { margin: 0 0 5px; color: var(--h5-signal); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sqh5-deal-layout--single { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .55fr); gap: 16px; }

/* Deals rail. Same construction as the Marketplace rail one section up: this wrapper is the
   scroll viewport and the shared product grid becomes the track, so the cards themselves stay
   the canonical component and nothing about them is redeclared here. */
.sqh5-deal-rail {
	overflow-anchor: none;
	overflow-x: auto;
	margin-inline: -4px;
	padding: 4px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 4px;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.sqh5-deal-rail::-webkit-scrollbar { display: none; }
.sqh5-deal-rail:focus-visible { outline: 2px solid var(--h5-signal); outline-offset: 2px; border-radius: 20px; }
.sqh5-deal-rail .sqh5-product-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 54px) / 4); align-items: stretch; gap: 18px; }
.sqh5-deal-rail .sqh5-product { scroll-snap-align: start; }

/* The link and the arrows share the right-hand end of the subhead. */
.sqh5-subhead__end { display: flex; align-items: center; gap: 16px; }
.sqh5-deal-note { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 430px; padding: clamp(28px, 3.4vw, 46px); border-radius: 18px; background: var(--h5-dark); color: var(--h5-on-dark); }
.sqh5-deal-note > span { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border: 1px solid var(--h5-dark-line); border-radius: 13px; background: var(--h5-dark-surface); color: var(--h5-signal); }
.sqh5-deal-note > span svg { inline-size: 22px; block-size: 22px; }
.sqh5-deal-note p { margin: auto 0 0; color: var(--h5-signal); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sqh5-deal-note h3 { margin: 12px 0 0; font-size: var(--sq-t-h2); line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h1); }
.sqh5-deal-note small { margin-block-start: 15px; color: var(--h5-dark-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); }
.sqh5-deal-note a { display: flex; justify-content: space-between; align-items: center; min-block-size: 48px; margin-block-start: 26px; padding-inline: 15px; border-radius: 10px; background: var(--h5-signal); color: var(--wp--preset--color--on-signal) !important; font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); text-decoration: none; }
.sqh5-deal-note a svg { inline-size: 16px; block-size: 16px; }
.sqh5-sponsored, .sqh5-featured { margin-block-start: 34px; padding-block-start: 28px; border-block-start: 1px solid var(--h5-line); }
.sqh5-featured__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sqh5-featured__grid li { min-inline-size: 0; }
.sqh5-featured__grid li > a { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 13px; min-block-size: 116px; padding: 18px; border: 1px solid var(--h5-line); border-radius: 15px; background: var(--h5-surface); text-decoration: none; }
.sqh5-featured__mark { display: grid; place-items: center; overflow: hidden; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--h5-soft); font-size: var(--sq-t-h4); font-weight: var(--sq-w-bold); }
.sqh5-featured__mark img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sqh5-featured__grid li > a > span:nth-child(2) { display: grid; min-inline-size: 0; }
.sqh5-featured__grid strong { overflow: hidden; font-size: var(--sq-t-p3); text-overflow: ellipsis; white-space: nowrap; }
.sqh5-featured__grid small, .sqh5-featured__grid em { overflow: hidden; color: var(--h5-muted); font-size: var(--sq-t-p3); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.sqh5-featured__grid .sqc-disc--chips { grid-column: 1 / -1; }

/* Editorial growth and conversion. */
.sqh5-growth { background: var(--h5-canvas); }
/* Four guides across, advancing one at a time. The wrapper is the scroll viewport and the
   existing grid is the track, so the cards themselves are untouched. */
.sqh5-guide-rail {
	overflow-anchor: none;
	overflow-x: auto;
	margin-inline: -4px;
	padding: 4px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 4px;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.sqh5-guide-rail::-webkit-scrollbar { display: none; }
.sqh5-guide-rail:focus-visible { outline: 2px solid var(--h5-signal); outline-offset: 2px; border-radius: 20px; }
.sqh5-guide-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 48px) / 4); align-items: stretch; gap: 16px; }
.sqh5-guide { scroll-snap-align: start; }
/* Built from the canonical product card, not from a card of its own: frameless, one rounded
   media frame with the same inset hairline, then a 16px title and a muted meta line at the
   same sizes `.sq-tc` uses. Nothing here sets a border, a panel background or a radius on the
   card itself — that boxed white treatment was what made this row look imported. */
.sqh5-guide { display: flex; flex-direction: column; min-inline-size: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.sqh5-guide > a { display: flex; flex-direction: column; block-size: 100%; text-decoration: none; }
.sqh5-guide__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	background: var(--h5-soft);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h5-text) 5%, transparent);
}

.sqh5-guide__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 220ms ease; }
.sqh5-guide__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 2px 0; }
.sqh5-guide__body strong {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--sq-t-p2);
	font-weight: var(--sq-w-semibold);
	line-height: var(--sq-lh-ui);
	letter-spacing: var(--sq-ls-h4);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.sqh5-guide__meta { display: flex; align-items: baseline; gap: 7px; min-inline-size: 0; color: var(--h5-muted); font-size: var(--sq-t-p3); }
.sqh5-guide__meta small { overflow: hidden; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.sqh5-guide__meta em { flex: 0 0 auto; font-style: normal; }
.sqh5-guide__meta em::before { content: "·"; margin-inline-end: 7px; }
.sqh5-guide > a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sqh5-guide > a:focus-visible { outline: 2px solid var(--h5-signal); outline-offset: 3px; border-radius: 16px; }
.sqh5-guide:hover img { transform: scale(1.018); }

.sqh5-growth__bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 16px; }
.sqh5-seller, .sqh5-newsletter, .sqh5-method { display: flex; flex-direction: column; min-block-size: 360px; padding: clamp(27px, 3vw, 42px); border-radius: 20px; }
.sqh5-seller { background: var(--h5-signal); color: var(--wp--preset--color--on-signal); }
.sqh5-seller > span { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 13px; background: color-mix(in srgb, var(--wp--preset--color--on-signal) 18%, transparent); }
.sqh5-seller > span svg { inline-size: 22px; block-size: 22px; }
.sqh5-seller p, .sqh5-newsletter > div > p, .sqh5-method > p { margin: auto 0 0; font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sqh5-seller h2, .sqh5-newsletter h2, .sqh5-method h2 { margin: 10px 0 0; font-size: var(--sq-t-h1); line-height: var(--sq-lh-h1); letter-spacing: var(--sq-ls-h1); }
.sqh5-seller small, .sqh5-newsletter > div > span, .sqh5-method > span { margin-block-start: 15px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); opacity: .86; }
.sqh5-seller a { display: flex; justify-content: space-between; align-items: center; min-block-size: 48px; margin-block-start: 24px; padding-inline: 15px; border-radius: 10px; background: var(--h5-surface); color: var(--h5-text); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); text-decoration: none; }
.sqh5-seller a svg { inline-size: 15px; block-size: 15px; }

.sqh5-newsletter { border: 1px solid var(--h5-line); background: var(--h5-surface); }
.sqh5-newsletter form { margin-block-start: auto; padding-block-start: 24px; }
.sqh5-newsletter form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sqh5-newsletter .sqb-news__input, .sqh5-newsletter .sqb-news__btn { min-block-size: 48px; }
.sqh5-newsletter .sqb-news__status { margin: 7px 0 0; }
.sqh5-newsletter form > small { display: block; margin-block-start: 8px; color: var(--h5-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-eyebrow); }

.sqh5-method { background: var(--h5-dark); color: var(--h5-on-dark); }
.sqh5-method > p { color: var(--h5-signal); }
.sqh5-method > span { color: var(--h5-dark-muted); }
.sqh5-method nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block-start: auto; padding-block-start: 24px; }
.sqh5-method nav a { color: var(--h5-on-dark); font-size: var(--sq-t-p3); text-underline-offset: 3px; }

.sqh5-image-empty { display: grid; place-items: center; inline-size: 100%; block-size: 100%; background: var(--h5-soft); color: var(--h5-muted); }
.sqh5-image-empty svg { inline-size: 30px; block-size: 30px; }

@media (max-width: 1180px) {
	.sqh5-guide-grid { grid-auto-columns: calc((100% - 32px) / 3); }

	.sqh5-deal-rail .sqh5-product-grid { grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; }

	.sqh5-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.sqh5-hero-card { min-block-size: 0; }
	.sqh5-hero-card ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sqh5-hero-card li { grid-template-columns: 38px minmax(0, 1fr); padding-inline: 13px; border-inline-end: 1px solid var(--h5-line); }
	.sqh5-hero-card li:first-child { padding-inline-start: 0; }
	.sqh5-hero-card li:last-child { padding-inline-end: 0; border-inline-end: 0; }
	.sqh5-hero-card .sqh5-button { margin-block-start: 0; }
	.sqh5-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sqh5-product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sqh5-product-grid--count-1 { grid-template-columns: minmax(0, 1fr); }
	.sqh5-product-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh5-product-grid--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sqh5-growth__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh5-method { grid-column: 1 / -1; min-block-size: 270px; }
}

@media (max-width: 900px) {
	.sqh5-deal-rail .sqh5-product-grid { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }

	.sqh5-hero__story { min-block-size: 560px; align-items: flex-start; padding-block: 32px 0; }
	.sqh5-hero__copy { inline-size: 72%; padding-inline-end: 24px; }
	.sqh5-hero__art { inset: 0; inline-size: auto; }
	.sqh5-hero__asset { translate: none; }
	.sqh5-hero__asset--plugin { inset: 46% auto auto 5%; }
	.sqh5-hero__asset--template { inset: 64% 24% auto auto; }
	.sqh5-hero__asset--extension { inset: 82% 4% auto auto; }
	.sqh5-hero__asset--course { display: none; }
	.sqh5-hero-card ul { grid-template-columns: minmax(0, 1fr); }
	.sqh5-hero-card li { padding-inline: 0; border-inline-end: 0; }
	.sqh5-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh5-product-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh5-product-grid--count-1 { grid-template-columns: minmax(0, 1fr); }
	.sqh5-product-grid--count-2, .sqh5-product-grid--count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sqh5-guide-grid { grid-auto-columns: calc((100% - 16px) / 2); }
	.sqh5-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	/* The shared grid becomes its own flex scroller at this width; inside the rail the
	   wrapper is the scroller, so the grid has to stay a grid or nothing ever overflows. */
	.sqh5-deal-rail .sqh5-product-grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(86vw, 340px);
		gap: 12px;
		overflow: visible;
		padding: 0;
	}

	.sqh5-deal-rail .sqh5-product { flex: none; }
	.sqh5-subhead__end { gap: 12px; }

	.sqh5-shell { inline-size: calc(100% - 28px); }
	.sqh5-section { padding-block: 50px; }
	.sqh5-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
	.sqh5-promo > div { flex-wrap: wrap; gap: 3px 6px; min-block-size: 48px; padding-block: 7px; }
	.sqh5-promo a { inline-size: 100%; margin-inline-start: 0; }
	.sqh5-hero { padding: 10px 0 18px; }
	.sqh5-hero__story { min-block-size: 0; padding-block-end: 205px; border-radius: 18px; }
	.sqh5-hero__copy { inline-size: 100%; padding: 26px 22px; --h5-hero-h1: clamp(32px, 9.4vw, 44px); }
	.sqh5-hero__copy h1 { max-inline-size: none; }
	.sqh5-hero__copy > p:last-child { margin-block-start: 14px; font-size: 14px; }
	.sqh5-hero__asset { min-inline-size: 205px; padding: 12px; }
	.sqh5-hero__asset--plugin { inset: auto auto 106px 5%; }
	.sqh5-hero__asset--template { inset: auto 4% 14px auto; }
	.sqh5-hero__asset--extension, .sqh5-hero__asset--course { display: none; }
	.sqh5-hero-card { min-block-size: 0; padding: 27px 22px; border-radius: 18px; }
	.sqh5-hero-card h2 { font-size: 31px; }
	.sqh5-tabs { margin-inline-end: -14px; }
	.sqh5-product-grid, .sqh5-product-grid--3 {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		padding: 1px 14px 8px 0;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.sqh5-product-grid::-webkit-scrollbar { display: none; }
	.sqh5-product { flex: 0 0 min(82vw, 340px); scroll-snap-align: start; }
	.sqh5-product-grid--count-1 .sq-pc { display: flex; min-block-size: 0; flex-direction: column; }
	.sqh5-product-grid--count-1 .sq-pc__media { min-block-size: 0; aspect-ratio: 16 / 10; border-inline-end: 0; border-block-end: 1px solid var(--h5-line); }
	.sqh5-commercial__head h2 { font-size: var(--sq-t-h1); }
	.sqh5-originals__head { gap: 20px; }
	.sqh5-deal-layout--single { grid-template-columns: minmax(0, 1fr); }
	.sqh5-deal-note { min-block-size: 340px; }
	.sqh5-commercial__head { align-items: flex-start; flex-direction: column; gap: 14px; }
	.sqh5-commercial__head > p { text-align: start; }
	.sqh5-featured__grid { grid-template-columns: minmax(0, 1fr); }
	/* The rail wrapper is the scroller here, so the grid stays a grid. */
	.sqh5-guide-grid { grid-auto-columns: min(84vw, 350px); gap: 12px; }
	.sqh5-heading__end { gap: 12px; }
	.sqh5-growth__bottom { grid-template-columns: minmax(0, 1fr); }
	.sqh5-seller, .sqh5-newsletter, .sqh5-method { min-block-size: 330px; }
	.sqh5-method { grid-column: auto; }
}

@media (max-width: 390px) {
	.sqh5-hero__copy { --h5-hero-h1: 32px; }
	.sqh5-hero__asset { min-inline-size: 190px; }
	.sqh5-tabs button { padding-inline: 14px; }
	.sqh5-newsletter form > div { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.sqh5-hero__asset { transition: none; }
	.sqh5-guide__media img, .sqh5-product .sq-pc { transition: none !important; }
}