/* ===========================================================================
   Synameda front page.

   Scoped to body.snmd-v2. The header is not styled here.

   COLOUR ARCHITECTURE
   The brand gives two colours, blue and green. Two colours cannot carry a
   whole page: if every surface is one of them the page reads as a swatch
   test, not a design. So they are treated as accents and the page is built
   on a neutral scale, the way Stripe builds on navy plus slate plus a near
   white, and spends its brights sparingly.

     neutrals   the backbone: ink, four greys, two near whites
     blue       primary action, links, one icon family
     green      one accent, used at small scale and on dark ground where it
                actually reads. Never a full page-width field of flat green.
     tints      six soft washes, four of them lifted from the need card
                colours so that locked section belongs to the page instead
                of sitting in it as an island

   SECTION RHYTHM
   white, white, tint, white, navy, tint, white, tint, navy footer. Nothing
   is left to sit on the same ground as its neighbour.

   No underlined links. No decorative dividers. No pills.
   =========================================================================== */

/* These live on .hm and .sy-footer, not on body: Vuolia publishes its
   tokens on .vl-global, which is inside body, so a var() read at body level
   resolves to nothing and takes every value built on it down with it.
   Fallbacks are the pre-Vuolia values, so a missing token degrades to the
   current design instead of collapsing the page. */
body.snmd-v2 .hm,
body.snmd-v2 .sy-footer {
	/* ---- neutrals ---- */
	/* Two text colours on light ground and nothing else. Every heading is the
	   ink, every paragraph is the slate. The extra greys that used to sit
	   between them are what made the page look unsettled. */
	--n-ink: var(--snmd-color-text, #1F1F1F);
	--n-800: var(--snmd-color-text, #1F1F1F);
	--n-600: var(--snmd-color-text, #1F1F1F);
	--n-500: var(--snmd-color-text, #1F1F1F);
	--n-400: var(--snmd-color-text, #1F1F1F);
	--n-200: var(--snmd-color-border, #DFE7F1);
	/* Local: two washes with no Vuolia equivalent worth creating. */
	--n-100: #EDF2F9;
	--n-50: #F6F9FC;
	--white: var(--snmd-color-surface, #FFFFFF);

	/* ---- brand ---- */
	--blue: var(--snmd-color-accent, #3E6AE1);
	--blue-dark: var(--snmd-color-accent-hover, #3053B0);
	--blue-bg: #EDF2F9;
	--green: var(--snmd-color-accent-2, #33d5af);
	--green-deep: #12876B;
	--green-bg: #E2F7F1;

	/* ---- tints taken from the locked need palette ---- */
	/* Base tones come from Vuolia; the wash and ink beside each one are
	   local, they exist only in this section. */
	--clay: var(--snmd-color-need-clay, #D9927A);   --clay-bg: #FBEDE8;   --clay-ink: #8A4A32;
	--amber: var(--snmd-color-need-amber, #EBC46B); --amber-bg: #FDF4E0;  --amber-ink: #8A6414;
	--sage: var(--snmd-color-need-sage, #A6C3AE);   --sage-bg: #EAF3ED;   --sage-ink: #2F6B47;
	--peri: var(--snmd-color-need-peri, #B4C0E3);   --peri-bg: #EDF1FB;   --peri-ink: #3A4E8F;
	--teal: #2B6870;
	--mauve: #744563;

	/* ---- metrics ---- */
	--hm-gutter: var(--snmd-gutter, clamp(20px, 4vw, 48px));
	/* Half of the gap between two sections, not the gap itself. Every block
	   contributes this much clearance on each edge, by padding when it is
	   transparent and by margin when it paints its own panel, so any two
	   neighbours add up to the same distance. Vuolia calls this section
	   padding and emits the identical clamp. */
	--hm-sec: var(--snmd-section-y, clamp(56px, 5.2vw, 76px));

	--r-lg: var(--snmd-radius-card, 22px);
	/* Local: sits between Vuolia's card and small radius, nothing to gain. */
	--r: 16px;
	--r-sm: var(--snmd-radius-small, 12px);

	--shadow-sm: 0 2px 6px rgba(10, 30, 60, .04), 0 12px 28px -18px rgba(10, 30, 60, .18);
	--shadow: 0 4px 10px rgba(10, 30, 60, .05), 0 26px 54px -28px rgba(10, 30, 60, .30);

}

body.snmd-v2 .hm,
body.snmd-v2 .hm *,
body.snmd-v2 .hm *::before,
body.snmd-v2 .hm *::after { box-sizing: border-box; }

body.snmd-v2 .hm {
	color: var(--n-ink);
	font-family: var(--snmd-font-body, "Instrument Sans", system-ui, sans-serif);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.snmd-v2 .hm-wrap {
	width: 100%;
	margin: 0 auto;
	/* Zero by design. Every section is flush to its own box so the container
	   it is dropped into owns all spacing around it. Spacing inside a section
	   is untouched. */
	padding-inline: 0;
}

body.snmd-v2 .hm-sec { padding-block: 0; }

/* ---------------------------------------------------------------- type --- */

body.snmd-v2 .hm h1,
body.snmd-v2 .hm h2,
body.snmd-v2 .hm h3 {
	margin: 0;
	letter-spacing: -0.03em;
	color: var(--n-ink);
}

body.snmd-v2 .hm p { margin: 0; }

body.snmd-v2 .hm-head {
	max-width: 44ch;
	margin-bottom: clamp(40px, 4.4vw, 68px);
}

body.snmd-v2 .hm .hm-lead {
	margin-top: 20px;
	font-size: var(--snmd-type-lead, 21px);
	line-height: 1.55;
	color: var(--n-500);
}

/* ------------------------------------------------------------- buttons --- */

body.snmd-v2 .hm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--snmd-button-height, 40px);
	padding-inline: var(--snmd-button-padding-x, 32px);
	border: 0;
	border-radius: var(--snmd-radius-button, 4px);
	font-size: var(--snmd-button-font-size, 14px);
	font-weight: var(--snmd-weight-ui, 500);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease,
		box-shadow .2s ease, transform .2s ease;
}

/* Flat fill, no shadow. The coloured glow under a solid button is the single
   clearest tell of a generated design. Border always matches the fill, resting
   and hover both, so a solid button keeps the exact silhouette of the outlined
   ones beside it without reading as outlined itself. */
body.snmd-v2 .hm-btn--solid {
	background-color: var(--snmd-color-primary-button, #3E6AE1);
	background-image: none;
	color: var(--snmd-color-primary-button-text, #FFFFFF);
	border: 0.5px solid var(--snmd-color-primary-button-border, #3E6AE1);
	box-shadow: none;
}

body.snmd-v2 .hm-btn--solid:hover {
	background-color: var(--snmd-color-primary-button-hover, #3E6AE1);
	border-color: var(--snmd-color-primary-button-border-hover, #3E6AE1);
	box-shadow: none;
}

/* Quiet second action. A tinted fill rather than an outline, so there is no
   thin stroke competing with the solid button beside it. */
body.snmd-v2 .hm-btn--line {
	background-color: var(--blue-bg);
	color: var(--blue);
}

body.snmd-v2 .hm-btn--line:hover {
	background-color: #D8E6F6;
	transform: translateY(-2px);
}

/* Sits on the dark card. Green on navy is the one place green truly reads. */
body.snmd-v2 .hm-btn--accent {
	background-color: var(--green);
	color: var(--n-ink);
	box-shadow: 0 2px 6px rgba(18, 135, 107, .2), 0 16px 32px -16px rgba(18, 135, 107, .6);
}

body.snmd-v2 .hm-btn--accent:hover {
	background-color: #5FE0C1;
	transform: translateY(-2px);
}

/* Links carry colour and an arrow. Never an underline. */
body.snmd-v2 .hm-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
	transition: color .2s ease;
}

body.snmd-v2 .hm-link .s2-ico { transition: transform .2s ease; }
body.snmd-v2 .hm-link:hover .s2-ico { transform: translateX(6px); }

/* --------------------------------------------------------------- icons --- */

body.snmd-v2 .hm .s2-ico {
	display: block;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.snmd-v2 .hm .s2-ico__fill { fill: currentColor; stroke: none; }

body.snmd-v2 .hm-link .s2-ico { width: 20px; height: 20px; }

body.snmd-v2 .hm .s2-signal {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Shared icon tile. Big enough to be a design element rather than a bullet. */
body.snmd-v2 .hm-tile {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 15px;
}

body.snmd-v2 .hm-tile--blue  { background: var(--blue-bg);  color: var(--blue); }
body.snmd-v2 .hm-tile--green { background: var(--green-bg); color: var(--green-deep); }
body.snmd-v2 .hm-tile--clay  { background: var(--clay-bg);  color: var(--clay-ink); }
body.snmd-v2 .hm-tile--amber { background: var(--amber-bg); color: var(--amber-ink); }
body.snmd-v2 .hm-tile--sage  { background: var(--sage-bg);  color: var(--sage-ink); }
body.snmd-v2 .hm-tile--peri  { background: var(--peri-bg);  color: var(--peri-ink); }

/* --------------------------------------------------- image placeholders --- */

body.snmd-v2 .hm-ph {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: clamp(24px, 3vw, 40px);
	border-radius: var(--r-lg);
	background:
		repeating-linear-gradient(135deg,
			rgba(10, 30, 60, .028) 0 14px,
			rgba(10, 30, 60, 0) 14px 28px),
		var(--n-100);
}

body.snmd-v2 .hm-ph__tag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--n-400);
}

body.snmd-v2 .hm-ph__txt {
	max-width: 34ch;
	font-size: 16px;
	line-height: 1.5;
	color: var(--n-500);
}

body.snmd-v2 .hm-ph__size { font-size: 13.5px; color: var(--n-400); }

body.snmd-v2 .hm-ph--hero { aspect-ratio: 4 / 5; }
body.snmd-v2 .hm-ph--tall { aspect-ratio: 4 / 5; }

body.snmd-v2 .hm-ph--dark {
	aspect-ratio: 1 / 1;
	background:
		repeating-linear-gradient(135deg,
			rgba(255, 255, 255, .045) 0 14px,
			rgba(255, 255, 255, 0) 14px 28px),
		rgba(255, 255, 255, .07);
}

body.snmd-v2 .hm-ph--dark .hm-ph__tag { color: rgba(255, 255, 255, .5); }
body.snmd-v2 .hm-ph--dark .hm-ph__txt,
body.snmd-v2 .hm-ph--dark .hm-ph__size { color: rgba(255, 255, 255, .72); }

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

/* No bottom padding: the trust band below belongs to the hero rather than
   being a section after it, so the band's own top padding sets that gap. */
body.snmd-v2 .hm-hero { padding-block: 0; }

body.snmd-v2 .hm-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: clamp(40px, 6vw, 100px);
}

body.snmd-v2 .hm-hero__title {
	max-width: 13ch;
	font-size: var(--snmd-type-display, 74px) !important;
	line-height: 1.0 !important;
	letter-spacing: -0.04em;
}

body.snmd-v2 .hm .hm-hero__sub {
	/* Wide enough to hold "Natūralūs sprendimai nervų sistemai." on one line. */
	max-width: none;
	margin-top: 26px;
	font-size: clamp(22px, 2.1vw, 29px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.022em;
	/* Slate, not blue. It is a supporting line, and colouring it the accent
	   gave it more weight than the headline it sits under. Size and weight
	   already separate it from the paragraph below. */
	color: var(--n-500);
}

body.snmd-v2 .hm .hm-hero__lead {
	max-width: 50ch;
	margin-top: 24px;
	font-size: var(--snmd-type-lead, 21px);
	line-height: 1.6;
	color: var(--n-500);
}

body.snmd-v2 .hm-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 26px;
	margin-top: 40px;
}

/* The white half of the Tesla pair. Same geometry as the blue one, white fill,
   our ink rather than their #393C41. Unlike Tesla's, this one carries an accent
   border: theirs sits on photography where white alone separates, ours sits on
   a #FAFAFC page where a white button all but disappears. */
/* Hero actions are deliberately self-contained rather than inheriting Vuolia's
   global button geometry: this pair needs a calm desktop presence while still
   being able to compress predictably on narrow phones. */
body.snmd-v2 .hm-hero__actions .hm-btn {
	min-height: 44px;
	padding-inline: 36px;
	border-radius: 12px;
	font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 500;
}

body.snmd-v2 .hm-btn--white {
	background-color: var(--snmd-color-secondary-button, #FFFFFF);
	background-image: none;
	color: var(--snmd-color-secondary-text, #1F1F1F);
	border: 0.5px solid var(--snmd-color-secondary-border, #E3E9F3);
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	body.snmd-v2 .hm-btn--white:hover {
		background-color: var(--snmd-color-secondary-hover, #F0F0F3);
		border-color: var(--snmd-color-secondary-border-hover, #E3E9F3);
	}
}

/* The second action is a plain link, not a second filled button: two solid
   blocks side by side at the top of the page compete with each other. */
body.snmd-v2 .hm-link--hero,
body.snmd-v2 .hm-link--hero:hover {
	/* TRIAL: Tesla blue, second of the three places carrying the test. */
	color: #3E6AE1;
	font-size: 16.5px;
}

body.snmd-v2 .hm-hero__art { position: relative; }

/* Two classes deep: Elementor's `.elementor img { height:auto }` scores
   0,1,1 and would beat a single class, leaving the crop unapplied. */
body.snmd-v2 .hm .hm-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	border-radius: var(--r-lg);
}


/* --------------------------------------------------------------- trust --- */

/* Four claims, given real presence. This is the first thing under the hero,
   so tiny grey icons in a row will not do. */
/* Deliberately tighter than a section gap on both sides. This is a strip
   attached to the hero, not a block of its own: roughly a third of the standard
   distance above it, half below. The next section brings its own top padding. */
body.snmd-v2 .hm-trust { padding-block: 0; }

/* One block split by hairlines, not four separate cards. Four bordered boxes
   read as buttons and invite a click that does nothing; a single panel with
   dividers reads as one statement in four parts. */
body.snmd-v2 .hm-trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--n-200);
	border-radius: var(--r-lg);
	background: var(--white);
	overflow: hidden;
	list-style: none;
}

body.snmd-v2 .hm-trust__list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 34px 22px 32px;
	text-align: center;
	border-right: 1px solid var(--n-200);
}

body.snmd-v2 .hm-trust__list li:last-child { border-right: 0; }

/* Accent glyph on the faintest possible wash of the same accent: #3E6AE1 at
   about 4 percent over white running to 13 percent, which is a shift of roughly
   ten levels across the tile. Enough that the fill has a direction and does not
   read as a flat chip, not enough to be seen as a gradient. No border, the wash
   already separates the tile from the white cell behind it. */
body.snmd-v2 .hm-trust__ico {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: linear-gradient(150deg, #F5F8FE 0%, #E4EBFB 100%);
	border: 0;
	color: #3E6AE1;
	box-shadow: none;
}

body.snmd-v2 .hm-trust__ico .s2-ico { width: 28px; height: 28px; }

body.snmd-v2 .hm-trust__txt {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--n-ink);
}

/* --------------------------------------------------------------- needs --- */

/* overflow-x:auto forces the other axis to clip too, so the cards' hover
   lift and its shadow were being cut off top and bottom. The vertical
   padding gives that movement somewhere to happen; the negative margin
   keeps the section's own rhythm unchanged. */
body.snmd-v2 .hm-needs__scroll {
	padding-inline: 0;
	padding-block: 10px 16px;
	margin-block: -10px -16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

body.snmd-v2 .hm-needs__scroll::-webkit-scrollbar { display: none; }

@media (hover: hover) and (pointer: fine) {
	body.snmd-v2 .hm-needs__scroll { cursor: grab; }
	body.snmd-v2 .hm-needs__scroll.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
		user-select: none;
	}
}

/* The track has to match the inner width of .hm-wrap, not the outer width,
   or the cards sit further left than every heading on the page. */
body.snmd-v2 .hm-needs__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc(20% - 16px);
	gap: 20px;
	width: auto;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

body.snmd-v2 .hm-need { display: flex; min-width: 0; scroll-snap-align: start; }

body.snmd-v2 .hm-need__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	/* The original 290 plus 10 percent. */
	min-height: 319px;
	padding: 34px 28px 30px;
	border-radius: var(--r-lg);
	background: var(--need-bg);
	color: var(--need-ink);
	text-decoration: none;
	transition: transform .22s ease, box-shadow .22s ease;
}

/* Hover only where there is a real pointer. A touch device would otherwise
   hold the lifted state after a tap, which is worse than having no hover.
   The shadow is tight and low-opacity so it does not need a large clearance
   under the scroller to avoid being clipped. */
@media (hover: hover) and (pointer: fine) {
	body.snmd-v2 .hm-need__link:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 22px -12px rgba(10, 30, 60, .28);
	}
}

body.snmd-v2 .hm-need__title {
	font-size: clamp(22px, 1.5vw, 26px) !important;
	line-height: 1.14 !important;
	color: inherit !important;
}

body.snmd-v2 .hm .hm-need__quote {
	margin-top: 14px;
	font-size: 16.5px;
	line-height: 1.5;
	opacity: .8;
}

/* No divider above this. It is pinned to the bottom, which is what keeps the
   five cards reading as one row. */
body.snmd-v2 .hm-need__go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 32px;
	font-size: 16px;
	font-weight: 600;
}

body.snmd-v2 .hm-need__go .s2-ico {
	width: 20px;
	height: 20px;
	transition: transform .2s ease;
}

body.snmd-v2 .hm-need__link:hover .hm-need__go .s2-ico { transform: translateX(6px); }

/* Locked fills. Dark ink on the four light cards; white only on the navy. */
/* Card fills are locked. The type on them is not, so all four light cards use
   the same ink as the rest of the page instead of four different near-blacks
   tinted to their own card. Each clears 5:1 on its fill. Only the navy card
   carries white. */
body.snmd-v2 .hm-need--clay  { --need-bg: var(--snmd-color-need-clay, #d9927a);  --need-ink: var(--n-ink); }
body.snmd-v2 .hm-need--night { --need-bg: var(--snmd-color-need-night, #1f2b47); --need-ink: #FFFFFF; }
body.snmd-v2 .hm-need--amber { --need-bg: var(--snmd-color-need-amber, #ebc46b); --need-ink: var(--n-ink); }
body.snmd-v2 .hm-need--sage  { --need-bg: var(--snmd-color-need-sage, #a6c3ae);  --need-ink: var(--n-ink); }
body.snmd-v2 .hm-need--peri  { --need-bg: var(--snmd-color-need-peri, #b4c0e3);  --need-ink: var(--n-ink); }
body.snmd-v2 .hm-need--teal  { --need-bg: #2B6870; --need-ink: #FFFFFF; }
body.snmd-v2 .hm-need--mauve{ --need-bg: #744563; --need-ink: #FFFFFF; }

body.snmd-v2 .hm-needs__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

body.snmd-v2 .hm-needs__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(31, 31, 31, .22);
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

body.snmd-v2 .hm-needs__dots button.is-active {
	width: 24px;
	border-radius: 999px;
	background: #1F1F1F;
}

/* --------------------------------------------------------- bestsellers --- */

body.snmd-v2 .hm-bestsellers { overflow: hidden; }

body.snmd-v2 .hm-bestsellers h2 { margin-bottom: clamp(30px, 3.4vw, 48px); }

body.snmd-v2 .hm-bestsellers__viewport { overflow: visible; }

body.snmd-v2 .hm-bestsellers__track { width: 100%; }

body.snmd-v2 .hm-bestsellers__set {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 12px !important;
	width: 100%;
}

body.snmd-v2 .hm-bestsellers__set--before,
body.snmd-v2 .hm-bestsellers__set--after { display: none; }

@media (min-width: 768px) {
	body.snmd-v2 .hm-bestsellers__set .pc__body { min-height: 170px; }
}

/* ----------------------------------------------------------------- why --- */

body.snmd-v2 .hm-why__grid {
	display: grid;
	grid-template-columns: 0.88fr 1.12fr;
	align-items: center;
	gap: clamp(40px, 5.5vw, 88px);
}

body.snmd-v2 .hm-why__art { position: relative; }
body.snmd-v2 .hm-why__art--mobile { display: none; }

body.snmd-v2 .hm .hm-why__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	border-radius: var(--r-lg);
}

body.snmd-v2 .hm-why__badge {
	position: absolute;
	right: -20px;
	bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 20px 24px;
	border-radius: var(--r);
	background: var(--white);
	box-shadow: var(--shadow);
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--n-500);
}

body.snmd-v2 .hm-why__badge strong {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--blue);
}

/* A two column set of tiles, not a bordered list. Removes six full width
   rules from the page and gives the icons somewhere to live. */
body.snmd-v2 .hm-why__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 28px;
	/* Bottom margin carries the whole gap to the button below, and 44px left it
	   crowding the last row of icons. */
	margin: 40px 0 60px;
	padding: 0;
	list-style: none;
}

body.snmd-v2 .hm-why__list li {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 17.5px;
	font-weight: 500;
	line-height: 1.4;
}

body.snmd-v2 .hm-why__ico {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
}

/* One colour for all six. A row of green, blue, yellow and red tiles is the
   clearest tell of a generated layout: the colours carry no meaning, they are
   just different. This is the brand green pulled down and desaturated so it
   reads as considered rather than as a stock palette swatch. */
body.snmd-v2 .hm-why__ico {
	background: linear-gradient(150deg, #F5F8FE 0%, #E4EBFB 100%);
	color: #3E6AE1;
}

body.snmd-v2 .hm-why__ico .s2-ico { width: 26px; height: 26px; }

/* --------------------------------------------------------------- story --- */

/* Contained and rounded on desktop so it matches the width of every other
   section, full bleed and square on a phone where side gaps on a dark band
   just waste the screen. The background lives on an inner layer rather than
   the section, which is what lets the two behave differently. */
/* The section is the panel. Its width is the wrap's inner measure, so its
   edge lines up with every heading and card on the page, and overflow:hidden
   keeps the decorative trace inside the rounded corners. Full bleed and
   square on a phone, handled in the mobile block. */
body.snmd-v2 .hm-story {
	position: relative;
	/* Inset by the same gutter every .hm-wrap uses, so the panel's edge lands
	   exactly on the text edge of the sections above and below it. */
	margin-inline: 0;
	/* This section paints its own panel, so its clearance has to come from
	   margin. The padding below is the panel's inside, not space between
	   sections, and the two were being confused for each other. */
	margin-block: 0;
	padding-block: clamp(56px, 6vw, 96px);
	border-radius: var(--r-lg);
	/* Accent 20: the accent taken down to a fifth. Chosen over the old near black
	   because it puts the panel in the same family as the network image in the
	   section below instead of sitting outside the palette. */
	background: #0D1327;
	overflow: hidden;
}

/* The grid inside is a .hm-wrap, which would add the gutter a second time
   and push the copy 96px off the panel edge. Its padding is the panel's
   inner padding instead. */
body.snmd-v2 .hm-story__grid { padding-inline: clamp(24px, 3.4vw, 56px); }

body.snmd-v2 .hm-story__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: clamp(40px, 5.5vw, 88px);
}

body.snmd-v2 .hm-story h2 {
	max-width: 17ch;
	color: var(--white) !important;
}

body.snmd-v2 .hm-story__copy p {
	max-width: 50ch;
	margin-top: 22px;
	font-size: var(--snmd-type-lead, 21px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}

body.snmd-v2 .hm-story__copy .hm-link { margin-top: 36px; }

body.snmd-v2 .hm-story .hm-link,
body.snmd-v2 .hm-story .hm-link:hover { color: #FFFFFF; }

body.snmd-v2 .hm .hm-story__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--r-lg);
}

/* Drawn above the photograph rather than behind it, so the trace crosses the
   image and the two read as layers instead of the picture sitting on top of
   a line that stops dead at its edge. Clipped by the panel's overflow. */
body.snmd-v2 .hm-story__signal {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 180px;
	pointer-events: none;
	/* Both shadows are blue, not cyan. A tight cyan core stacked on a pale
	   stroke desaturated towards white at 2px, which read as a white glow
	   rather than a blue one. Wider radii for spread, no tight core at all. */
	filter: drop-shadow(0 0 7px rgba(47, 107, 232, .48))
		drop-shadow(0 0 22px rgba(47, 107, 232, .30));
}

/* Gradient stroke instead of currentColor, defined in the SVG itself. */
body.snmd-v2 .hm-story__signal .s2-signal {
	stroke: url(#snmd-signal-grad);
	stroke-opacity: .92;
}

/* ---------------------------------------------------------------- test --- */

/* Same panel as the need pages: a photograph under an accent scrim, copy and
   button stacked on the left. No shadow. */
body.snmd-v2 .hm-test { padding-block: 0; }

body.snmd-v2 .hm-test__panel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(300px, 26vw, 400px);
	padding: clamp(36px, 4.4vw, 68px);
	border-radius: var(--r-lg);
	overflow: hidden;
	/* Accent blue, not the old navy. Local values on purpose: the homepage is
	   not wired to Vuolia yet, so #3E6AE1 lives here until it is. Deepened
	   towards the left so the copy side has weight and the panel is not flat. */
	background: linear-gradient(115deg, #3255B4 0%, #3E6AE1 58%, #4D76E3 100%);
	isolation: isolate;
}

/* Two classes deep so Elementor's `.elementor img { height:auto }` cannot
   stop the photo covering the panel. */
body.snmd-v2 .hm .hm-test__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% 22%;
	border-radius: 0;
}

body.snmd-v2 .hm-test__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Right edge is lighter than the old navy ramp, not heavier. Navy at 48%
	   still read as shadow over the photo; a mid-tone blue at that strength
	   swallowed her completely, so the far edge drops to 38% to bring the
	   portrait back while the copy side stays solid. */
	background: linear-gradient(90deg, rgba(50, 85, 180, .96) 0%, rgba(62, 106, 225, .86) 46%, rgba(62, 106, 225, .38) 100%);
}

body.snmd-v2 .hm-test__body { max-width: 46ch; }

body.snmd-v2 .hm-test h2 {
	max-width: 18ch;
	color: var(--white) !important;
}

body.snmd-v2 .hm-test p {
	max-width: 52ch;
	margin-top: 16px;
	font-size: var(--snmd-type-lead, 21px);
	line-height: 1.5;
	/* .78 measured 4.1:1 on the accent, under the 4.5:1 floor for 21px text.
	   The old navy carried it; this blue does not. */
	color: rgba(255, 255, 255, .88);
}

body.snmd-v2 .hm-test__body .hm-btn { margin-top: 30px; }

/* ----------------------------------------------------------- resources --- */

body.snmd-v2 .hm-res__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.2vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.snmd-v2 .hm-res__item { display: flex; min-width: 0; }

body.snmd-v2 .hm-res__item > a {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px 18px 30px;
	border-radius: var(--r-lg);
	background: var(--white);
	box-shadow: var(--shadow-sm);
	color: inherit;
	text-decoration: none;
	transition: transform .22s ease, box-shadow .22s ease;
}

body.snmd-v2 .hm-res__item > a:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
}

body.snmd-v2 .hm-res__pic {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	aspect-ratio: 16 / 10;
	padding: 22px;
	border-radius: var(--r);
	background:
		repeating-linear-gradient(135deg,
			rgba(10, 30, 60, .028) 0 14px,
			rgba(10, 30, 60, 0) 14px 28px),
		var(--n-100);
}

body.snmd-v2 .hm-res__pic .hm-ph__txt { font-size: 14.5px; }

/* One tag colour per subject, so the three cards are not identical.
   The 8px side margin plus the card's own 18px gives text a 26px inset,
   which is what keeps it off the image frame without a second wrapper. */
body.snmd-v2 .hm-res__tag {
	align-self: flex-start;
	margin: 24px 8px 0;
	padding: 8px 13px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

body.snmd-v2 .hm-res__item:nth-child(1) .hm-res__tag { background: var(--blue-bg);  color: var(--blue); }
body.snmd-v2 .hm-res__item:nth-child(2) .hm-res__tag { background: var(--peri-bg);  color: var(--peri-ink); }
body.snmd-v2 .hm-res__item:nth-child(3) .hm-res__tag { background: var(--clay-bg);  color: var(--clay-ink); }

body.snmd-v2 .hm-res__item h3 {
	margin: 16px 8px 0 !important;
	font-size: clamp(21px, 1.5vw, 25px) !important;
	line-height: 1.22 !important;
}

body.snmd-v2 .hm-res__item p {
	margin: 12px 8px 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--n-500);
}

body.snmd-v2 .hm-res__go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 24px 8px 0;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--blue);
}

body.snmd-v2 .hm-res__go .s2-ico {
	width: 20px;
	height: 20px;
	transition: transform .2s ease;
}

body.snmd-v2 .hm-res__item > a:hover .hm-res__go .s2-ico { transform: translateX(6px); }

/* ----------------------------------------------------------------- faq --- */

/* Three items, two columns. The heading and the contact block stack down the
   left, the questions fill the right across both rows. */
body.snmd-v2 .hm-faq__grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	align-items: start;
	/* Row gap is the space under the heading; column gap stays generous. */
	gap: 36px clamp(40px, 5.5vw, 88px);
	grid-template-rows: auto 1fr;
}

body.snmd-v2 .hm-faq__intro { grid-column: 1; grid-row: 1; }
body.snmd-v2 .hm-faq__mail { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; }
body.snmd-v2 .hm-faq__list { grid-column: 2; grid-row: 1 / span 2; }

/* Wide enough that "Dažniausiai užduodami klausimai" sets on two lines
   rather than three. */
body.snmd-v2 .hm-faq__intro h2 { max-width: 19ch; }

/* White card with a hairline, matching the FAQ items beside it, rather than a
   dark slab. A plain block, not a link: only the address is clickable. */
body.snmd-v2 .hm-faq__mail {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 40px;
	padding: 24px 26px;
	border: 1px solid var(--n-200);
	border-radius: var(--r);
	background: var(--white);
}

body.snmd-v2 .hm-faq__mail span {
	font-size: 16px;
	color: var(--n-500);
}

body.snmd-v2 .hm-faq__mail a {
	font-size: 19px;
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	body.snmd-v2 .hm-faq__mail a:hover { color: var(--blue-dark); }
}


/* Each question is its own white card. No table rules. */
body.snmd-v2 .hm-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.snmd-v2 .hm-faq__item {
	border-radius: var(--r);
	background: var(--white);
	box-shadow: 0 1px 2px rgba(20, 22, 29, .025), 0 8px 20px rgba(20, 22, 29, .035);
	transition: box-shadow .2s ease;
}

body.snmd-v2 .hm-faq__item[open] { box-shadow: 0 2px 4px rgba(20, 22, 29, .03), 0 12px 28px rgba(20, 22, 29, .05); }

body.snmd-v2 .hm-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 28px;
	font-size: clamp(17.5px, 1.35vw, 20px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.015em;
	cursor: pointer;
	list-style: none;
}

body.snmd-v2 .hm-faq__item summary::-webkit-details-marker { display: none; }

body.snmd-v2 .hm-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background:
		linear-gradient(var(--blue), var(--blue)) center / 14px 2px no-repeat,
		linear-gradient(var(--blue), var(--blue)) center / 2px 14px no-repeat,
		var(--blue-bg);
	transition: background-size .2s ease;
}

body.snmd-v2 .hm-faq__item[open] summary::after {
	background:
		linear-gradient(var(--blue), var(--blue)) center / 14px 2px no-repeat,
		linear-gradient(var(--blue), var(--blue)) center / 0 14px no-repeat,
		var(--blue-bg);
}

body.snmd-v2 .hm-faq__ans { padding: 0 76px 28px 28px; }

body.snmd-v2 .hm-faq__ans p {
	font-size: 17.5px;
	line-height: 1.65;
	color: var(--n-500);
}

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

/* Front page only. No rules, no white strokes: separation comes from spacing
   and from a slightly lifted panel, not from lines drawn across it. */
body.snmd-v2 .sy-footer {
	background: var(--n-ink) !important;
	border: 0 !important;
}

body.snmd-v2 .sy-footer *,
body.snmd-v2 .sy-footer *::before,
body.snmd-v2 .sy-footer *::after {
	border-color: transparent !important;
	box-shadow: none !important;
}

body.snmd-v2 .sy-footer .sy-wordmark--footer {
	font-size: 30px !important;
	font-weight: 700 !important;
	letter-spacing: -0.035em !important;
	color: var(--white) !important;
	text-decoration: none !important;
}

body.snmd-v2 .sy-footer h2,
body.snmd-v2 .sy-footer h3 {
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .13em !important;
	color: var(--n-400) !important;
}

body.snmd-v2 .sy-footer p,
body.snmd-v2 .sy-footer span,
body.snmd-v2 .sy-footer li,
body.snmd-v2 .sy-footer a {
	font-size: 16.5px !important;
	line-height: 1.75 !important;
	color: rgba(255, 255, 255, .68) !important;
	text-decoration: none !important;
}

body.snmd-v2 .sy-footer a { transition: color .2s ease !important; }
body.snmd-v2 .sy-footer a:hover { color: var(--green) !important; }

body.snmd-v2 .sy-footer .snmd-button {
	min-height: 56px !important;
	padding-inline: 30px !important;
	border: 0 !important;
	border-radius: var(--r-sm) !important;
	background: var(--green) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	transition: background .2s ease, transform .2s ease !important;
}

body.snmd-v2 .sy-footer .snmd-button,
body.snmd-v2 .sy-footer .snmd-button span { color: var(--n-ink) !important; }

body.snmd-v2 .sy-footer .snmd-button:hover {
	background: #5FE0C1 !important;
	transform: translateY(-2px);
}

/* The legal note reads as a panel rather than a boxed-in leftover. */
body.snmd-v2 .sy-footer [class*="note"] {
	border-radius: var(--r) !important;
	background: rgba(255, 255, 255, .05) !important;
	padding: 22px 24px !important;
}

/* ===================================================== responsive ======== */

@media (max-width: 1180px) {
	body.snmd-v2 .hm-hero__grid,
	body.snmd-v2 .hm-why__grid,
	body.snmd-v2 .hm-story__grid,
	body.snmd-v2 .hm-faq__grid { grid-template-columns: minmax(0, 1fr); }

	body.snmd-v2 .hm-hero__art,
	body.snmd-v2 .hm-why__art { max-width: 560px; }

	body.snmd-v2 .hm-ph--hero,
	body.snmd-v2 .hm-ph--tall { aspect-ratio: 16 / 10; }

	body.snmd-v2 .hm-why__badge { right: auto; left: 28px; }

	body.snmd-v2 .hm-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.snmd-v2 .hm-res__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	body.snmd-v2 .hm-needs__track {
		grid-template-columns: repeat(7, 290px);
		grid-auto-flow: row;
		grid-auto-columns: auto;
		width: max-content;
		max-width: none;
		padding-right: 0;
	}
}

@media (max-width: 760px) {
	body.snmd-v2 .hm-needs__dots { display: none; }
	/* Gutter and section rhythm are no longer set here: Vuolia's clamps already
	   bottom out at the phone values, 20px and 56px. */
	body.snmd-v2 .hm-head { margin-bottom: 30px; }
	body.snmd-v2 .hm .hm-lead { margin-top: 14px; }

	body.snmd-v2 .hm-hero__grid { gap: 34px; }
	body.snmd-v2 .hm .hm-hero__sub { margin-top: 18px; }
	body.snmd-v2 .hm .hm-hero__lead { margin-top: 18px; }
	/* Side by side on a phone too. The Tesla geometry is short enough that both
	   actions fit one line at 375, which the old full width stack did not allow
	   and which also hid the new button style on mobile entirely. */
	body.snmd-v2 .hm-hero__actions {
		flex-direction: row;
		align-items: center;
		/* Wrap rather than nowrap: at 375 the pair fits one line with room to
		   spare, but a 360px phone is 15px short, and stacking there is a much
		   better failure than a label running under the gutter. */
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 28px;
	}

	body.snmd-v2 .hm-res__item > a { padding: 14px 14px 24px; }
	body.snmd-v2 .hm-res__pic { padding: 18px; }
	body.snmd-v2 .hm-res__tag { margin-top: 20px; }
	body.snmd-v2 .hm-res__go { margin-top: 20px; }

	body.snmd-v2 .hm-why__list { margin: 28px 0 44px; }
	body.snmd-v2 .hm-story__copy p { margin-top: 16px; }
	body.snmd-v2 .hm-story__copy .hm-link { margin-top: 26px; }
	/* One column, and the contact block moves under the questions where it
	   actually belongs in a phone reading order. */
	body.snmd-v2 .hm-faq__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 26px; }
	body.snmd-v2 .hm-faq__intro { grid-column: auto; grid-row: auto; order: 1; }
	body.snmd-v2 .hm-faq__list { grid-column: auto; grid-row: auto; order: 2; }
	/* Dropped on a phone: the address already lives in the footer. */
	body.snmd-v2 .hm-faq__mail { display: none; }

	/* ---------------------------------------------------------------------
	   Mobile hero: the photograph becomes the panel rather than a block
	   sitting beside dead space. Copy and buttons sit on top of it.

	   The picture is moved behind with position:absolute rather than being
	   swapped for a CSS background, so the same <img> keeps serving its
	   width/height and fetchpriority and there is no second request.
	   --------------------------------------------------------------------- */
	body.snmd-v2 .hm-hero__title { max-width: none; }
	body.snmd-v2 .hm-hero__actions .hm-btn {
		flex: 0 0 auto;
		width: auto;
		min-height: 40px;
		padding-inline: 16px;
		font-size: 14px;
	}

	/* Picture leads on a phone, copy follows. */
	body.snmd-v2 .hm-hero__art { order: -1; }
	body.snmd-v2 .hm-hero__grid { gap: 34px; }
	body.snmd-v2 .hm .hm-hero__img { aspect-ratio: 16 / 11; }

	/* Two by two on a phone, dividers between the cells. Full bleed: the wrap
	   drops its gutter and the panel loses its corners and side edges, so the
	   white runs to both screen edges and only the top and bottom hairlines
	   are left. The cells keep their own padding, the band does not. */
	body.snmd-v2 .hm-trust .hm-wrap { padding-inline: 0; }

	body.snmd-v2 .hm-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-inline: 0;
		border-radius: 0;
	}

	body.snmd-v2 .hm-trust__list li {
		gap: 12px;
		padding: 24px 12px 22px;
		border-right: 1px solid var(--n-200);
		border-bottom: 1px solid var(--n-200);
	}

	body.snmd-v2 .hm-trust__list li:nth-child(2n) { border-right: 0; }
	body.snmd-v2 .hm-trust__list li:nth-child(n+3) { border-bottom: 0; }
	/* Narrow enough that every one of the four labels breaks onto two lines,
	   so the cells match in height instead of one sitting a line short. */
	body.snmd-v2 .hm-trust__txt {
		font-size: 14.5px;
		line-height: 1.3;
		max-width: 15ch;
		min-height: 2.6em;
		margin-inline: auto;
	}

	body.snmd-v2 .hm-trust__ico { width: 48px; height: 48px; border-radius: 13px; }
	body.snmd-v2 .hm-trust__ico .s2-ico { width: 24px; height: 24px; }

	body.snmd-v2 .hm-why__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	body.snmd-v2 .hm-why__art--desktop { display: none; }
	body.snmd-v2 .hm-why__art--mobile {
		display: block;
		max-width: none;
		margin-top: 28px;
	}
	body.snmd-v2 .hm-res__grid { grid-template-columns: minmax(0, 1fr); }
	body.snmd-v2 .hm-needs__track { grid-template-columns: repeat(7, 80vw); }

	body.snmd-v2 .hm-bestsellers__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		margin-right: 0;
		padding-right: 0;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.snmd-v2 .hm-bestsellers__viewport::-webkit-scrollbar { display: none; }

	body.snmd-v2 .hm-bestsellers__track { width: max-content; }

	body.snmd-v2 .hm-bestsellers__set {
		display: grid;
		grid-template-columns: repeat(4, calc((100vw - 46px) / 2)) !important;
		gap: 10px !important;
		width: max-content;
	}

	body.snmd-v2 .hm-bestsellers__set .pc {
		width: 100%;
	}

	/* Full bleed on a phone, same as the story panel and the trust band: the
	   wrap drops its gutter and the panel loses its corners, so the blue runs
	   to both screen edges. The inside padding stays so type is not flush. */
	body.snmd-v2 .hm-test .hm-wrap { padding-inline: 0; }

	body.snmd-v2 .hm-test__panel {
		min-height: 340px;
		padding: 40px var(--hm-gutter) 44px;
		border-radius: 0;
	}

	/* No photograph on a phone. There is only room for a sliver of her above the
	   headline, which reads as a mistake rather than an image, so the panel is
	   the accent gradient alone. */
	body.snmd-v2 .hm .hm-test__bg { display: none; }
	body.snmd-v2 .hm-test__panel::after { background: none; }
	body.snmd-v2 .hm-test p { margin-top: 14px; }
	body.snmd-v2 .hm-test__body .hm-btn { margin-top: 24px; width: 100%; }

	body.snmd-v2 .hm-faq__ans { padding: 0 24px 26px; }
	body.snmd-v2 .hm-faq__item summary { padding: 22px 24px; }
	/* Full bleed and square on a phone: side gaps on a dark band waste width,
	   and the panel reads better running edge to edge. */
	body.snmd-v2 .hm-story {
		margin-inline: 0;
		border-radius: 0;
		/* Inside the panel, not around it. Running edge to edge on a phone the
		   copy sat close to the top and bottom of the dark, which made the band
		   feel tight even though the space outside it was correct. */
		padding: 76px 0 92px;
	}

	body.snmd-v2 .hm-story__grid { padding-inline: var(--hm-gutter); }

	/* Photograph first on a phone. Copy first meant the band opened with a
	   headline sitting on flat dark and the image arrived as an afterthought
	   at the bottom, just above the signal trace. */
	body.snmd-v2 .hm-story__art { order: -1; }

	body.snmd-v2 .hm-story__signal { height: 105px; }

	body.snmd-v2 .hm .hm-story__img { aspect-ratio: 16 / 11; }
	body.snmd-v2 .hm .hm-why__img { aspect-ratio: 16 / 11; }
	body.snmd-v2 .hm-why__badge { left: 16px; bottom: 16px; padding: 16px 20px; }
	body.snmd-v2 .hm-why__badge strong { font-size: 30px; }
}

/* Very compact phones, including the 360px Galaxy A15 viewport: retain the
   side-by-side treatment, but let both actions share the available line rather
   than wrapping or overflowing into the page gutter. */
@media (max-width: 389px) {
	body.snmd-v2 .hm-hero__actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
		width: 100%;
	}

	body.snmd-v2 .hm-hero__actions .hm-btn {
		min-width: 0;
		width: 100%;
		padding-inline: 6px;
		font-size: 12px;
		letter-spacing: -.01em;
		white-space: nowrap;
	}
}