/* ============================================================
   Homepage 2026 Preview - "Screen time labs x Qustodio"
   Prototype styles for template-home-2026.php.

   Scoped to .stl26 and loaded ONLY by that template, so nothing
   here can reach the existing site, the blog, or the 166 help
   centre articles. Do not merge into style.css.

   Artwork comes from the supplied source folder (Homepage/01-hero,
   02-now-qustodio, 03-tools, 04-quote, 05-start-free-trial) and is
   served from uploads/figma-2026/. The hero, merge and free-trial
   sections are single 2x renders, so their internal composition is
   the designer's, not a CSS reconstruction.

   Hero colours below are sampled from hero-desktop.png. The mint bar,
   yellow CTA and body ink are still eyeballed - those sections were
   not in the supplied renders.
   ============================================================ */

:root {
	--stl-mint: #cbfae6;        /* campaign-topbar, read from Figma */
	--stl-mint-ink: #14402f;
	--stl-lav: #efedfb;
	--stl-purple: #4b3fc4;
	--stl-purple-dk: #3a2fa8;
	--stl-navy: #241f63;
	--stl-hero-base: #21216e;   /* sampled from hero-desktop.png */
	--stl-yellow: #fed874;      /* CTA face, sampled from the artwork */
	--stl-yellow-edge: #ffd16b; /* CTA lower edge */
	--stl-ink: #241f47;
	--stl-muted: #55556f;
	--stl-pink: #e8286b;
	--stl-line: #e4e2f2;
	--stl-wrap: 1180px;
	--stl-gap: 96px;
	--stl-r: 14px;
	--stl-display: "Quicksand", "Trebuchet MS", sans-serif;
	--stl-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.stl26 * { box-sizing: border-box; }

/* Page-level reset - only meaningful when a 2026 template owns the document. */
body.stl26 {
	margin: 0;
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

/* Inheritable typography lives on .stl26 rather than body.stl26 so it also
   applies when a section is rendered inside an ordinary page - a shortcode
   wrapper carrying class="stl26" gets the same baseline. The four rules
   below (* , headings, img, a) already scope by .stl26 as an ancestor, so
   they work against a wrapper unchanged. */
.stl26 {
	font-family: var(--stl-body);
	font-size: 16px;
	line-height: 1.62;
	color: var(--stl-muted);
}

.stl26 h1, .stl26 h2, .stl26 h3, .stl26 h4 {
	font-family: var(--stl-display);
	color: var(--stl-ink);
	margin: 0 0 .6em;
	line-height: 1.18;
	font-weight: 700;
}

/* :where() keeps these element defaults at zero specificity so any
   single-class rule below can override them - a plain `.stl26 img`
   selector (0,1,1) silently beat .stl26-hero__mobileart (0,1,0). */
.stl26 :where(img) { max-width: 100%; height: auto; display: block; }
.stl26 :where(a) { color: var(--stl-purple); }

.stl26-wrap {
	max-width: var(--stl-wrap);
	margin: 0 auto;
	padding: 0 28px;
	width: 100%;
}

.stl26-center { text-align: center; }

.stl26-h2c {
	text-align: center;
	font-size: clamp(28px, 3.4vw, 40px);
	margin-bottom: 56px;
}

/* --- prototype watermark ------------------------------------ */
.stl26-flag {
	background: #1d1b32;
	color: #cfcbe8;
	font-size: 12px;
	letter-spacing: .04em;
	text-align: center;
	padding: 7px 16px;
	font-family: var(--stl-body);
}

/* --- buttons ------------------------------------------------ */
.stl26-btn {
	display: inline-block;
	font-family: var(--stl-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 17px 30px;
	border-radius: 8px;
	text-decoration: none;
	/* No transform here. The buttons used to lift 1px on hover, which the
	   live site does not do and which read as the whole CTA twitching. */
	transition: background .16s ease, color .16s ease;
	border: 2px solid transparent;
}
/* Flat, not a gradient. Sampled from the designer's own blog banner, which
   has the CTA baked into the artwork: the face is #ffd873 and the label
   #21216e, both flat. The vertical gradient here was invented and made the
   lower half read darker than the design. */
.stl26-btn--yellow { background: var(--stl-yellow); color: #21216e; }
.stl26-btn--yellow:hover { background: var(--stl-yellow-edge); }
.stl26-btn--purple { background: var(--stl-purple); color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.stl26-btn--purple:hover { background: var(--stl-purple-dk); }
.stl26-btn--ghost { background: transparent; color: var(--stl-purple); border-color: var(--stl-purple); }
.stl26-btn--ghost:hover { background: var(--stl-purple); color: #fff; }
.stl26-btn--sm { padding: 10px 20px; font-size: 14px; text-transform: none; letter-spacing: 0; }

/* --- 1. announcement bar ------------------------------------ */
.stl26-announce {
	background: var(--stl-mint);
	color: var(--stl-mint-ink);
	font-size: 14px;
	min-height: 56px;          /* Figma: campaign-topbar, fixed 56px */
	display: flex;
	align-items: center;
	padding: 8px 0;
}
.stl26-announce__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
}
.stl26-announce strong { font-weight: 700; }
.stl26-announce__sep { opacity: .4; }
.stl26-announce a { color: var(--stl-mint-ink); font-weight: 700; text-decoration: underline; }

/* --- 2. header ---------------------------------------------- */
.stl26-header {
	background: #fbfaff;
	border-bottom: 1px solid var(--stl-line);
	position: sticky;
	top: 0;
	z-index: 40;
}
.stl26-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 78px;
}
.stl26-logo img { width: 168px; }
.stl26-nav { display: flex; gap: 26px; margin-left: auto; }
.stl26-nav a {
	font-family: var(--stl-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--stl-ink);
	text-decoration: none;
	padding: 4px 0;
}
/* Hover matches the live site: colour AND underline, the same treatment the
   current item gets. Previously only the colour changed, so hovering felt
   dead by comparison. The border is always present and transparent, so the
   text does not shift by 2px when it appears. */
.stl26-nav a { border-bottom: 2px solid transparent; }
.stl26-nav a:hover,
.stl26-nav a.is-active { color: var(--stl-purple); border-bottom-color: var(--stl-purple); }
.stl26-header__cta { display: flex; gap: 10px; }
.stl26-burger {
	display: none;
	margin-left: auto;
	background: none;
	border: 0;
	padding: 8px 4px;
	cursor: pointer;
}
/* Mobile menu panel. Hidden with the [hidden] attribute, which the toggle
   flips - no display juggling in JS. Desktop hides it outright so it can
   never appear above the breakpoint even if the attribute is stale. */
.stl26-mobilenav {
	display: none;
	background: #fff;
	border-top: 1px solid var(--stl-line);
	box-shadow: 0 14px 30px rgba(36, 31, 71, .10);
}
.stl26-mobilenav[hidden] { display: none; }
.stl26-mobilenav .stl26-wrap { display: flex; flex-direction: column; padding-top: 10px; padding-bottom: 18px; }
.stl26-mobilenav a {
	font-family: var(--stl-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--stl-ink);
	text-decoration: none;
	padding: 13px 2px;
	border-bottom: 1px solid var(--stl-line);
}
.stl26-mobilenav a.is-active { color: var(--stl-purple); }
.stl26-mobilenav__cta { display: flex; gap: 10px; margin-top: 16px; }
.stl26-mobilenav__cta .stl26-btn { flex: 1; text-align: center; border-bottom: 0; }
.stl26-mobilenav__cta a { border-bottom: 0; padding: 12px 18px; }

/* Burger turns into a cross while the panel is open. */
.stl26-burger span { transition: transform .18s ease, opacity .18s ease; }
.stl26-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.stl26-burger.is-open span:nth-child(2) { opacity: 0; }
.stl26-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.stl26-burger span {
	display: block;
	width: 24px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--stl-ink);
}
.stl26-burger span + span { margin-top: 5px; }

/* --- 3. hero ------------------------------------------------
   Background is the designer's full hero render. The left half of
   that artwork is deliberately empty for the copy, so nothing here
   reconstructs the cards, orbs, shield, pill or wave - they are all
   baked into the image.
   ------------------------------------------------------------ */
.stl26-hero {
	position: relative;
	/* HOW THE DESIGN ACTUALLY BEHAVES AT LARGE WIDTHS: it does not.
	   The Figma canvas is a fixed 1470px frame (the page body inside it is
	   "Fixed 1470px"), and the delivered asset is 2940x1630 - exactly 2x that
	   canvas. There is no wider artboard, so anything past 1470px is ours to
	   decide, not something to read off the design.

	   What the design does say is that the hero BLEEDS: the arrow orb and the
	   location-pin orb are clipped by the right edge of the frame on purpose,
	   so they run off the side of the browser. That is the thing to preserve.
	   Earlier versions centred the artwork and manufactured surround on both
	   sides, which broke exactly that - on a wide screen those deliberately
	   clipped orbs stopped being clipped and became cut-off shapes stranded in
	   open space, with an invented gradient beside them.

	   So the artwork is pinned to the RIGHT edge of the viewport and only the
	   left is extended. The left half of the render is empty gradient by
	   design - it is where the copy sits - so repeating its edge column is
	   seamless by construction: no content to smear and no join to disguise
	   (worst step across the join: 3/765, at JPEG noise level). That is why
	   this works where three attempts at extending rightwards did not.

	   hero-desktop-left-v5.jpg is 4400x1087: the 1960px render at the right,
	   2440px of its own left edge column beside it. At the hero's 815px height
	   that covers 3299 CSS px. Beyond that the linear-gradient layer behind it
	   continues, sampled from the same left edge column.

	   Below 1470px the min-height below scales the hero at 55.5% of the
	   viewport width (815/1470), so the artwork tracks the viewport exactly
	   and the composition stays as drawn. */
	background-color: var(--stl-hero-base);
	background-image:
		url("../../../../uploads/figma-2026/hero-desktop-left-v5.jpg"),
		linear-gradient(to bottom,
			#22216d 0%, #21206c 10%, #23226e 25%, #272674 40%,
			#323383 55%, #454699 70%, #5064a5 85%, #4a7b9b 100%);
	background-position: right center, left center;
	background-size: auto 100%, 100% 100%;
	background-repeat: no-repeat, no-repeat;
	color: #fff;
	overflow: hidden;
}
.stl26-hero__inner {
	display: flex;
	align-items: center;
	/* Deliberately NOT widened past the site's container. This used to be
	   1470px so the copy would clear the centred artwork, which pushed the
	   hero copy ~145px left of every other section on the page - the hero was
	   the one block that did not line up with anything. In the design the
	   hero copy sits in the same column as the rest of the page: the frame is
	   1470 wide with 150px side padding, so the content column is 1170 - the
	   site's 1180px wrap, near enough. Inheriting .stl26-wrap is the fix. */
	min-height: clamp(560px, 55.5vw, 815px);
	padding-top: 48px;
	padding-bottom: 48px;
}
.stl26-hero__copy {
	width: min(50%, 560px);
	text-align: center;
}
.stl26-hero h1 {
	color: #fff;
	font-size: clamp(28px, 3.2vw, 39px);
	margin-bottom: 20px;
}
.stl26-hero__sub { color: #e2ddfa; font-size: 16.5px; margin: 0 auto 26px; max-width: 30em; }
.stl26-hero__sub strong { color: #fff; font-weight: 600; }
.stl26-hero__note { font-size: 13px; color: #cfc8f0; margin: 22px 0 0; line-height: 1.55; }
.stl26-hero__note strong { color: #fff; }
.stl26-hero__mobileart { display: none; }

.stl26-platforms { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 0; justify-content: center; align-items: center; }
.stl26-platforms svg { width: 22px; height: 22px; fill: #ffffff; opacity: .92; }
.stl26-platforms svg.is-wide { width: 30px; }
.stl26-platforms__word { font-size: 14px; color: #fff; opacity: .92; font-family: var(--stl-body); }
.stl26-awards { display: flex; gap: 16px; margin-top: 26px; align-items: center; justify-content: center; }
.stl26-awards img { width: 92px; height: auto; }

/* --- 4. merge section --------------------------------------- */
.stl26-merge { background: var(--stl-lav); }
.stl26-merge__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
	padding-top: var(--stl-gap);
	padding-bottom: var(--stl-gap);
}
.stl26-merge__art img { width: 100%; height: auto; }
.stl26-merge h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 500; }
.stl26-merge p { margin: 0 0 18px; }
.stl26-merge .stl26-btn { margin-top: 10px; }

/* --- 5. feature grid ---------------------------------------- */
.stl26-tools { padding: var(--stl-gap) 0; background: #fff; }
.stl26-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 48px 32px;
}
.stl26-card { text-align: center; position: relative; }
.stl26-card__icon { display: block; margin: 0 auto 16px; width: 60px; }
.stl26-card__icon img { width: 60px; height: 60px; margin: 0 auto; }
.stl26-card h3 { font-size: 16px; margin: 0 0 8px; }
.stl26-card p { font-size: 14px; margin: 0; line-height: 1.6; }
.stl26-new {
	display: inline-block;
	background: var(--stl-pink);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 3px 9px;
	border-radius: 4px;
	margin-bottom: 9px;
}
.stl26-tools .stl26-center { margin-top: 60px; }

/* --- 6. testimonial ----------------------------------------- */
.stl26-quote {
	background: linear-gradient(100deg, #3b31b4 0%, #4b3fc4 50%, #6152d6 100%);
	color: #fff;
	text-align: center;
	padding: 78px 0;
}
.stl26-quote h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 500; margin-bottom: 34px; }
.stl26-quote blockquote { margin: 0 auto 30px; max-width: 44em; font-size: 17px; color: #ece9fb; }
.stl26-quote__avatar {
	display: block;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	margin: 0 auto 14px;
	object-fit: cover;
}
.stl26-quote__by { font-size: 14px; color: #dcd7f7; margin: 0 0 22px; }

/* The design shows this as a three-slide carousel - one testimonial visible,
   three dots beneath. It renders however many slides are supplied: with one,
   the dots are hidden and it is the static block it has always been, so the
   section is correct today and becomes the carousel the moment the other two
   quotes arrive, with no further work. */
.stl26-quote__slides { position: relative; }
.stl26-quote__slide { display: none; }
.stl26-quote__slide.is-current { display: block; }
.stl26-dots { display: flex; gap: 9px; justify-content: center; }
.stl26-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .42);
	cursor: pointer;
	transition: background .16s ease;
}
.stl26-dots button:hover { background: rgba(255, 255, 255, .7); }
.stl26-dots button.is-current { background: #fff; }
.stl26-dots:only-child, .stl26-dots--single { display: none; }
.stl26-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.stl26-dots i.is-on { background: #fff; }

/* --- 7. free trial ------------------------------------------ */
.stl26-trial { padding: var(--stl-gap) 0; background: #fff; }
.stl26-trial__card {
	background: var(--stl-navy);
	border-radius: 22px;
	padding: 56px 56px 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: center;
	overflow: hidden;
	position: relative;
}
.stl26-trial__copy { padding-bottom: 56px; }
.stl26-trial h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 500; }
.stl26-trial p { color: #cec9ee; margin: 0 0 26px; max-width: 26em; }
.stl26-trial__art { align-self: end; }
.stl26-trial__art img { width: 100%; height: auto; }

/* --- 8. press ----------------------------------------------- */
.stl26-press { padding: 0 0 var(--stl-gap); }
.stl26-press h2 { font-size: 26px; font-weight: 500; margin-bottom: 34px; }
.stl26-press__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 34px;
	flex-wrap: wrap;
}
.stl26-press__row img { max-height: 52px; width: auto; filter: grayscale(1); opacity: .82; }

/* --- 9. blog cards ------------------------------------------ */
/* "News from the blog" is rendered by omega's own [recent_posts_simple],
   exactly as production does it - see stl26_sc_posts(). Nothing is styled
   here on purpose: the 2026 card styles that used to live in this spot never
   matched the design or the live site, and omega's CSS already styles that
   markup correctly. */

/* --- 10. footer --------------------------------------------- */
.stl26-footer { background: var(--stl-lav); padding: 56px 0 0; }
.stl26-footer__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
}
.stl26-footer__brand img { width: 168px; margin-bottom: 16px; }
.stl26-footer__brand p { font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.stl26-footer__langlabel { font-weight: 700; color: var(--stl-ink); font-size: 13.5px; margin: 0 0 6px; }
.stl26-footer__lang { padding: 7px 10px; border: 1px solid #c9c5e0; border-radius: 5px; background: #fff; font-family: inherit; font-size: 13px; }
.stl26-footer__col h4 { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 16px; }
.stl26-footer__col a { display: block; color: var(--stl-muted); text-decoration: none; font-size: 14px; margin-bottom: 9px; }
.stl26-footer__col a:hover { color: var(--stl-purple); }
.stl26-footer__col--apps img { width: 150px; margin-bottom: 12px; border-radius: 6px; }
.stl26-footer__bar { text-align: center; padding: 34px 0 26px; }
.stl26-social { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.stl26-social a {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--stl-ink);
	display: grid;
	place-items: center;
	transition: background .16s ease;
}
.stl26-social a:hover { background: var(--stl-purple); }
.stl26-social svg { width: 15px; height: 15px; fill: #fff; display: block; }
.stl26-footer__bar p { font-size: 12px; margin: 0; }

/* --- responsive --------------------------------------------- */
@media (max-width: 1024px) {
	.stl26-grid { grid-template-columns: repeat(3, 1fr); }
	.stl26-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	:root { --stl-gap: 64px; }
	.stl26-nav, .stl26-header__cta { display: none; }
	.stl26-burger { display: block; }
	.stl26-mobilenav { display: block; }
	.stl26-mobilenav[hidden] { display: none; }
	.stl26-hero__inner,
	.stl26-merge__inner,
	.stl26-trial__card { grid-template-columns: 1fr; }
	.stl26-hero {
		background: linear-gradient(168deg, #333290 0%, #4a47b6 38%, #2a2a7c 78%, var(--stl-hero-base) 100%);
	}
	.stl26-hero__inner { display: block; text-align: center; padding-top: 44px; padding-bottom: 0; min-height: 0; }
	.stl26-hero__copy { width: 100%; }
	.stl26-hero__mobileart { display: block; width: 100%; margin-top: 26px; }
	.stl26-hero__sub { margin-left: auto; margin-right: auto; }
	.stl26-platforms, .stl26-awards { justify-content: center; }


	.stl26-merge__inner { text-align: center; }
	.stl26-merge__art { order: 2; }
	.stl26-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 22px; }
	.stl26-trial__card { padding: 40px 30px 0; text-align: center; }
	.stl26-trial__copy { padding-bottom: 30px; }
	.stl26-trial p { margin-left: auto; margin-right: auto; }
	.stl26-press__row { justify-content: center; gap: 26px; }
	.stl26-press__row img { max-height: 40px; }
}

@media (max-width: 560px) {
	.stl26-announce__inner { flex-direction: column; gap: 2px; }
	.stl26-announce__sep { display: none; }
	.stl26-footer__inner { grid-template-columns: 1fr; }
	.stl26-btn { width: 100%; text-align: center; }
	.stl26-header__inner { min-height: 64px; }
}

/* --- asset placeholders -------------------------------------
   Retained for any slot still missing real art. The hero, merge
   and free-trial images now come from figma-2026/, pulled
   straight out of the Figma file's own image fills.
   ------------------------------------------------------------ */
.stl26-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 18px;
	font-size: 12.5px;
	line-height: 1.6;
	padding: 24px;
	background-image: repeating-linear-gradient(45deg, rgba(127, 127, 160, .08) 0 12px, transparent 12px 24px);
	background-color: rgba(127, 127, 160, .10);
	border: 2px dashed rgba(127, 127, 160, .42);
}

/* The header/footer logo is still the OLD Screen Time mark - the design
   uses a new lockup with the Qustodio swoosh that could not be exported. */
.stl26-logo, .stl26-footer__brand img { position: relative; }

/* ============================================================
   Product page 2026 - the Qustodio banner
   Copy, type and geometry read from the Figma file:
     heading 36/48 #FFFFFF · body 24/36 #FFFFFF
     copy column 600px max, 48px gap · artwork 534x444 at 1x
   The band colour below is the one value still sampled by eye.
   ============================================================ */
:root { --stl-qband: #2a2a72; }

.stl26-pagehead { padding: 56px 0 8px; text-align: center; }
.stl26-pagehead h1 {
	font-family: var(--stl-display);
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 40px);
	color: #434381;              /* read from the design */
	max-width: 18em;
	margin: 0 auto;
}

/* context rows - not part of the change, dimmed so the banner reads as the edit */
.stl26-ctx { padding: 40px 0; }
.stl26-ctx__inner { display: flex; align-items: flex-start; gap: 32px; opacity: .55; }
.stl26-ctx__copy { max-width: 46em; }
.stl26-ctx h2 { font-size: 26px; font-weight: 500; color: var(--stl-purple); margin-bottom: 10px; }
.stl26-ctx__sub { color: var(--stl-purple); font-size: 14px; margin: -6px 0 10px; }
.stl26-ctx__note {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9a97b4;
	border: 1px dashed #c9c5e0;
	border-radius: 20px;
	padding: 5px 12px;
	white-space: nowrap;
}

.stl26-qbanner { background: var(--stl-qband); color: #fff; padding: 56px 0; }
.stl26-qbanner__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.stl26-qbanner__art img { width: 100%; max-width: 534px; margin-left: auto; height: auto; }
.stl26-qbanner__copy { max-width: 600px; display: flex; flex-direction: column; gap: 24px; }
.stl26-qbanner h2 {
	color: #fff;
	font-weight: 400;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.34;          /* 48/36 */
	margin: 0;
}
.stl26-qbanner p {
	color: #fff;
	font-size: clamp(17px, 1.7vw, 24px);
	line-height: 1.5;           /* 36/24 */
	margin: 0;
}
.stl26-btn--caps { text-transform: uppercase; letter-spacing: .05em; font-size: 15px; }
.stl26-qbanner .stl26-btn { align-self: flex-start; }

@media (max-width: 860px) {
	.stl26-qbanner__inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
	.stl26-qbanner__art img { margin: 0 auto; }
	.stl26-qbanner__copy { max-width: none; align-items: center; }
	.stl26-qbanner .stl26-btn { align-self: center; }
	.stl26-ctx__inner { flex-direction: column; gap: 14px; }
	.stl26-ctx__note { margin-left: 0; }
}

/* ============================================================
   Mission page 2026 - the Qustodio banner
   A different component from the Product banner: pale mint band,
   copy left, artwork right, no CTA. Values read from Figma:
     band     base/lime-300 #E2FDF4 · padding 96/168 · gap 40
     heading  48/57.6  #4346AF
     body 1   24/32    #4C4C4C  (bold span mid-sentence)
     body 2   18/24    #4C4C4C
     copy col 540px
   ============================================================ */
:root {
	--stl-lime-300: #e2fdf4;
	--stl-indigo:   #4346af;
	--stl-body-ink: #4c4c4c;
}

.stl26-pagehead--tight { padding-bottom: 0; }

.stl26-mbanner { background: var(--stl-lime-300); padding: 96px 0; }
.stl26-mbanner__inner {
	display: grid;
	grid-template-columns: 540px 1fr;
	gap: 40px;
	align-items: center;
}
.stl26-mbanner__copy { display: flex; flex-direction: column; gap: 24px; max-width: 540px; }
.stl26-mbanner h2 {
	color: var(--stl-indigo);
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.2;            /* 57.6 / 48 */
	margin: 0;
}
.stl26-mbanner__lead {
	color: var(--stl-body-ink);
	font-size: clamp(18px, 1.8vw, 24px);
	line-height: 1.34;           /* 32 / 24 */
	margin: 0;
}
.stl26-mbanner__lead strong { font-weight: 700; }
.stl26-mbanner__sub {
	color: var(--stl-body-ink);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.34;           /* 24 / 18 */
	margin: 0;
}
.stl26-mbanner__art img { width: 100%; max-width: 700px; height: auto; margin-left: auto; }

@media (max-width: 1100px) {
	.stl26-mbanner__inner { grid-template-columns: 1fr 1fr; }
	.stl26-mbanner__copy { max-width: none; }
}
@media (max-width: 860px) {
	.stl26-mbanner { padding: 56px 0; }
	.stl26-mbanner__inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
	.stl26-mbanner__copy { align-items: center; }
	.stl26-mbanner__art img { margin: 0 auto; }
}

/* ============================================================
   Blog post 2026 - the Qustodio banner
   Sits at the end of the post body. Figma geometry: frame Fill
   762.75px x Hug 344px with 32px padding top and bottom, which the
   1526x688 export already carries as transparent margin.

   CAVEAT: this banner ships as a flat image with the headline, body
   and CTA baked in - that is how the design exports it. Across ~330
   posts that means the copy is invisible to search engines and to
   screen readers beyond the alt text, cannot be translated for the
   German site without a second render, and cannot be edited without
   going back to the designer. A text-free background export would
   let the copy be live HTML. Worth raising before this ships.
   ============================================================ */
.stl26-post { padding: 48px 0 64px; }
.stl26-post__inner { display: grid; grid-template-columns: minmax(0, 763px) 1fr; gap: 48px; align-items: start; }
.stl26-post__body h1 {
	font-family: var(--stl-display);
	font-size: clamp(26px, 2.8vw, 34px);
	color: var(--stl-ink);
	margin: 0 0 18px;
}
.stl26-post__body h2 { font-size: 24px; color: var(--stl-ink); margin: 32px 0 12px; }
.stl26-post__body p { margin: 0 0 16px; }

.stl26-blogbanner { display: block; max-width: 763px; margin: 8px auto; text-decoration: none; }
.stl26-blogbanner img { width: 100%; height: auto; }

.stl26-post__meta { border-top: 1px solid var(--stl-line); margin-top: 24px; padding-top: 16px; }
.stl26-post__cat { font-size: 13px; color: var(--stl-muted); }
.stl26-post__nav { margin-top: 28px; }
.stl26-post__side { padding-top: 8px; }
.stl26-ctx__note--inline { display: inline-block; margin: 0 0 20px; }

@media (max-width: 860px) {
	.stl26-post__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
	.stl26-blogbanner { max-width: 324px; }
}

/* --- real language switcher --------------------------------
   Replaces the decorative <select> the previews shipped with,
   which had no handler behind it - picking German did nothing
   because there was never a link. These are WPML's own URLs.
   ------------------------------------------------------------ */
.stl26-langs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.stl26-langs a {
	display: inline-block;
	font-size: 13px;
	text-decoration: none;
	color: var(--stl-muted);
	border: 1px solid #c9c5e0;
	border-radius: 5px;
	padding: 6px 12px;
	background: #fff;
}
.stl26-langs a:hover { color: var(--stl-purple); border-color: var(--stl-purple); }
.stl26-langs a.is-active { background: var(--stl-purple); border-color: var(--stl-purple); color: #fff; font-weight: 600; }

/* --- shortcode context --------------------------------------
   When a section renders inside an ordinary page, omega's CSS is
   still loaded for the page body. These keep the section from
   inheriting the theme's container padding and list styles, and
   give .stl26 the box model the templates get from body.stl26.
   ------------------------------------------------------------ */
.stl26-section { margin: 0; padding: 0; }
.stl26-section > section { margin: 0; }
.stl26-chrome ul, .stl26-section ul { list-style: none; margin: 0; padding: 0; }
.stl26-chrome a, .stl26-section a { text-decoration: none; }
.stl26-chrome img, .stl26-section img { max-width: 100%; height: auto; }
.stl26-merge--reverse .stl26-merge__inner { direction: rtl; }
.stl26-merge--reverse .stl26-merge__inner > * { direction: ltr; }