/*
 * Product page — Design v1. Mobile first (390 px artboard), desktop from 900 px (1440 px artboard).
 * One block per section, in page order, so a section's styles live in one place.
 * `.sc-js` is set on <html> in the <head> (includes/assets.php): rules using it only apply when
 * product.js will run, so without JavaScript everything stays visible and open.
 */

/* ---------- Base ---------- */
.sc { font-family: var(--sc-font-body); color: var(--sc-ink); font-size: var(--sc-fs-body); line-height: 1.5; background: var(--sc-paper); -webkit-font-smoothing: antialiased; }
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc img { display: block; max-width: 100%; height: auto; }
.sc :where(h1, .sc h2, .sc h3, .sc h4, .sc p, .sc ul, .sc ol, .sc dl, .sc dd, .sc figure) { margin: 0; }
.sc :where(ul, .sc ol)[role="list"] { list-style: none; padding: 0; }
.sc a:not(.sc-btn) { color: inherit; }
/* Long words (Finnish compounds) wrap instead of overflowing; hyphenation follows <html lang>.
   Running text is only hyphenated in Finnish, where compounds would otherwise leave big gaps. */
.sc :where(h1, .sc h2, .sc h3, .sc h4, .sc a, .sc button, .sc summary, .sc th, .sc td, .sc dt, .sc dd, .sc p, .sc li) { overflow-wrap: break-word; }
.sc :where(h1, .sc h2, .sc h3, .sc h4, .sc button, .sc summary, .sc th, .sc td, .sc dt, .sc dd, .sc .sc-btn), .sc:lang(fi) :where(p, .sc li) { hyphens: auto; }
.sc .sc-wrap { width: 100%; max-width: calc(var(--sc-max) + 2 * var(--sc-gutter)); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc .sc-band { background: var(--sc-sand); }
.sc :where(section[id]) { scroll-margin-top: calc(var(--sc-header-h) + var(--sc-subnav-h) + 4px); }

.sc .sc-h2, .sc .sc-h3, .sc .sc-hero__title, .sc .sc-banner__title, .sc .sc-subnav__name, .sc .sc-feature__title, .sc .sc-card__title, .sc .sc-acc__title {
	font-family: var(--sc-font-display); font-weight: 700; text-transform: var(--sc-display-case);
	line-height: 1; letter-spacing: 0; text-wrap: balance;
}
.sc .sc-h2 { font-size: var(--sc-fs-h2); }
.sc .sc-h3 { font-size: 1.75rem; }
.sc .sc-h4 { font-size: 1.0625rem; font-weight: 600; }
.sc .sc-lead { font-size: var(--sc-fs-lead); line-height: 1.55; color: var(--sc-ink-2); text-wrap: pretty; }
.sc .sc-eyebrow { font-size: var(--sc-fs-small); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sc .sc-eyebrow a { color: inherit; text-decoration: none; }
.sc .sc-eyebrow--muted { color: var(--sc-ink-3); font-weight: 400; letter-spacing: .1em; font-size: .75rem; }
.sc sup.sc-fnref { font-size: .7em; line-height: 0; margin-left: 1px; }
.sc sup.sc-fnref a { color: inherit; text-decoration: none; }
.sc sup.sc-fnref a:hover { color: var(--sc-accent); }

/* Show on one layout only. The other copy stays in the HTML (crawlers read both). */
@media (max-width: 899px) { .sc .sc-only-lg { display: none !important; } }
@media (min-width: 900px) { .sc .sc-only-sm { display: none !important; } }

/* ---------- Buttons ---------- */
.sc .sc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc .sc-cart-form { margin: 0; }
.sc .sc-btn {
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	min-height: 44px; padding: 10px 24px; border-radius: var(--sc-radius-pill); border: 1.5px solid var(--sc-ink);
	font: 600 .9375rem/1.2 var(--sc-font-body); text-decoration: none; cursor: pointer; white-space: normal;
	transition: background-color .15s, color .15s, border-color .15s;
}
.sc .sc-btn--sm { min-height: 40px; padding: 8px 14px; font-size: .875rem; }
.sc .sc-btn--primary { background: var(--sc-ink); color: var(--sc-paper); }
.sc .sc-btn--primary:hover { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.sc .sc-btn--secondary { background: transparent; color: var(--sc-ink); }
.sc .sc-btn--secondary:hover { background: var(--sc-ink); color: var(--sc-paper); }
.sc .sc-btn--accent { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.sc .sc-btn--accent:hover { background: var(--sc-accent-hover); border-color: var(--sc-accent-hover); color: var(--sc-accent-ink); }
.sc .sc-btn--disabled { background: var(--sc-line); border-color: var(--sc-line); color: var(--sc-ink-3); cursor: not-allowed; }
.sc :is(a, .sc button, .sc summary):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 4px; }
.sc .sc-btn:focus-visible { border-radius: var(--sc-radius-pill); }

/* ---------- Price ---------- */
.sc .sc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sc .sc-price__from { margin-right: .25em; }
.sc .sc-price__amount { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.sc .sc-price__tax { font-size: .875rem; color: #555; }
.sc .sc-price--hero { font-size: 1rem; }
.sc .sc-price--hero .sc-price__amount { font-size: 1.875rem; }
.sc .sc-price--hero .sc-price__tax { font-size: .8125rem; color: rgb(255 255 255 / .88); }
.sc .sc-price--card .sc-price__amount { font-family: var(--sc-font-body); font-size: 1.5rem; }

/* ---------- 1 Hero ---------- */
.sc .sc-hero { position: relative; height: min(660px, 88svh); min-height: 540px; display: grid; align-items: end; color: #fff; background: #000; overflow: hidden; }
.sc .sc-hero__media, .sc .sc-hero__media picture, .sc .sc-hero__img, .sc .sc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc .sc-hero__img, .sc .sc-hero__video { height: 100%; object-fit: cover; object-position: 50% 40%; }
.sc .sc-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / 0) 70%); }
.sc .sc-hero__content { position: relative; padding-block: 48px 28px; display: grid; gap: 14px; justify-items: start; }
.sc .sc-hero .sc-eyebrow { font-size: .8125rem; }
.sc .sc-hero__title { font-size: var(--sc-fs-hero); line-height: .9; letter-spacing: -.01em; }
.sc .sc-hero__tagline { font-size: var(--sc-fs-lead); max-width: 40ch; color: rgb(255 255 255 / .92); }

/* Optional (Product page settings): phones show the header over the hero photo. */
@media (max-width: 899px) {
	.sc-header-overlay .sc .sc-hero { margin-top: calc(-1 * var(--sc-header-h)); }
	.sc-header-overlay .sc .sc-hero__media::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 160px; background: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / .25) 55%, rgb(0 0 0 / 0) 100%); }
}

/* ---------- 2 Sub-nav ---------- */
/* Phones: two rows, invisible over the hero, fades in once the hero is gone (product.js adds .is-solid). */
.sc .sc-subnav {
	position: sticky; top: var(--sc-top, var(--sc-header-h)); z-index: 20;
	background: var(--sc-paper); border-bottom: 1px solid var(--sc-line);
	transition: top .3s ease, opacity .3s ease, transform .3s ease, visibility .3s;
}
.sc .sc-subnav__inner {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name actions" "links links";
	align-items: center; column-gap: 10px; padding-inline: var(--sc-gutter) 16px;
}
.sc .sc-subnav__name {
	grid-area: name; min-width: 0; display: block; line-height: 60px;
	font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: var(--sc-ink); hyphens: none;
}
.sc .sc-subnav__name:hover { color: var(--sc-accent); }
.sc .sc-subnav__scroller {
	grid-area: links; min-width: 0; overflow-x: auto; scrollbar-width: none;
	margin-inline: calc(-1 * var(--sc-gutter)) -16px; padding-inline: var(--sc-gutter);
	border-top: 1px solid #ececec;
}
.sc .sc-subnav__scroller::-webkit-scrollbar { display: none; }
.sc .sc-subnav__links { display: flex; gap: 24px; height: 48px; list-style: none; margin: 0; padding: 0; }
.sc .sc-subnav__links li { display: flex; }
.sc .sc-subnav__links a {
	display: flex; align-items: center; white-space: nowrap; hyphens: none;
	font-size: .9375rem; font-weight: 400; color: #767676; text-decoration: none;
	box-shadow: inset 0 -2px 0 transparent; transition: color .2s ease, box-shadow .2s ease;
}
.sc .sc-subnav__links a:hover { color: var(--sc-ink); }
.sc .sc-subnav__links a.is-active { color: var(--sc-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sc-accent); }
.sc .sc-actions--subnav { grid-area: actions; flex-wrap: nowrap; gap: 8px; }
.sc .sc-actions--subnav .sc-btn { white-space: nowrap; hyphens: none; }
.sc .sc-actions--subnav .sc-btn--primary { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.sc .sc-actions--subnav .sc-btn--primary:hover { background: var(--sc-accent-hover); border-color: var(--sc-accent-hover); }
/* Very narrow phones: keep the name readable, drop the secondary button. */
@media (max-width: 359px) { .sc .sc-actions--subnav .sc-btn--secondary { display: none; } }

@media (max-width: 899px) {
	.sc-js .sc .sc-subnav { margin-top: calc(-1 * var(--sc-subnav-h)); }
	.sc-js .sc .sc-subnav:not(.is-solid) { opacity: 0; transform: translateY(-12px); visibility: hidden; pointer-events: none; }
}

/* ---------- 3 Intro (+ 4 key stats on phones) ---------- */
.sc .sc-intro { padding-block: 20px 48px; }
.sc .sc-intro .sc-wrap { display: grid; gap: 18px; }
.sc .sc-crumbs { margin-bottom: 10px; font-size: .8125rem; line-height: 1.4; color: var(--sc-ink-3); }
.sc .sc-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sc .sc-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--sc-ink-3); }
.sc .sc-crumbs a { color: var(--sc-ink-3); text-decoration: underline; text-underline-offset: 2px; }
.sc .sc-crumbs a:hover { color: var(--sc-ink); }
.sc .sc-crumbs li:last-child { color: var(--sc-ink); font-weight: 600; }
.sc .sc-intro__grid { display: grid; gap: 18px; }
.sc .sc-stats { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-top: 24px; border-top: 1px solid var(--sc-line-sand); }
.sc .sc-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.sc .sc-stats__value { font-family: var(--sc-font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; }
.sc .sc-stats__unit { font-size: .6em; }
.sc .sc-stats__label { font-size: .875rem; line-height: 1.35; color: #555; }

/* ---------- 5 Features ---------- */
.sc .sc-features { padding-block: 48px 40px; }
.sc .sc-features__title { margin-bottom: 24px; }
.sc .sc-features__list { display: grid; gap: 16px; }
.sc .sc-feature { display: flex; flex-direction: column; border: 1px solid #e6e1da; border-radius: var(--sc-radius); overflow: hidden; background: var(--sc-paper); }
.sc .sc-feature__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sc .sc-feature__body { display: grid; gap: 8px; padding: 18px 20px 22px; }
.sc .sc-feature__num { font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-accent); font-size: .875rem; letter-spacing: .08em; }
.sc .sc-feature__title { font-size: var(--sc-fs-feature); line-height: 1.05; }
.sc .sc-feature__text { font-size: 1rem; line-height: 1.5; color: var(--sc-ink-2); text-wrap: pretty; }

/* ---------- 6 More features (not in Design v1; kept for products that use it) ---------- */
.sc .sc-more { padding-block: var(--sc-section); }
.sc .sc-more .sc-wrap { display: grid; gap: 28px; }
.sc .sc-tabs__group { border-top: 1px solid var(--sc-line-2); }
.sc .sc-tabs__group:last-child { border-bottom: 1px solid var(--sc-line-2); }
.sc .sc-tabs__title { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 600; font-size: 1.0625rem; }
.sc .sc-tabs__title::-webkit-details-marker { display: none; }
.sc .sc-tabs__items { list-style: none; margin: 0; padding: 0 0 24px; display: grid; gap: 20px; }
.sc .sc-tabs__items p { color: var(--sc-ink-2); margin-top: 4px; }
.sc .sc-tabs.is-tabs { display: grid; }
.sc .sc-tabs__bar { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-self: start; background: var(--sc-paper); padding: 4px; border-radius: var(--sc-radius-pill); margin-bottom: 28px; }
.sc .sc-tabs__bar button { min-height: 40px; padding: 10px 22px; border-radius: var(--sc-radius-pill); border: 0; background: transparent; font: 600 .9375rem/1.2 var(--sc-font-body); color: var(--sc-ink); cursor: pointer; text-align: center; }
.sc .sc-tabs__bar button[aria-selected="true"] { background: var(--sc-ink); color: var(--sc-paper); }
.sc .sc-tabs.is-tabs .sc-tabs__group { border: 0; }
.sc .sc-tabs.is-tabs .sc-tabs__title { display: none; }
.sc .sc-tabs.is-tabs .sc-tabs__items { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 32px; }

/* +/− markers shared by the <details> and button accordions */
.sc .sc-tabs__title::after, .sc .sc-faq__item summary::after, .sc .sc-acc__head::after, .sc .sc-table__toggle::after {
	content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 400 1.5rem/1 var(--sc-font-body);
}
.sc details[open] > .sc-tabs__title::after, .sc .sc-faq__item[open] summary::after,
	.sc .sc-acc.is-open > .sc-acc__head::after, .sc .sc-table__group.is-open .sc-table__toggle::after { content: "−"; }

/* ---------- 7 Version cards ---------- */
.sc .sc-versions { padding-block: var(--sc-section) 24px; }
.sc .sc-versions .sc-wrap { display: grid; gap: 24px; }
/* Phones: swipe row (also used by related products) */
.sc .sc-cards {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 300px); gap: 12px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sc-gutter); scrollbar-width: none;
	margin-inline: calc(-1 * var(--sc-gutter)); padding: 2px var(--sc-gutter) 4px; list-style: none;
}
.sc .sc-cards::-webkit-scrollbar { display: none; }
.sc .sc-card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--sc-paper); border: 1px solid var(--sc-card-line); border-radius: var(--sc-radius); overflow: hidden; }
.sc .sc-card.is-popular { border: 2px solid var(--sc-ink); }
.sc .sc-card__media { background: #eee; }
.sc .sc-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sc .sc-card__flag { position: absolute; top: 16px; left: 16px; z-index: 1; background: var(--sc-accent); color: var(--sc-accent-ink); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; }
.sc .sc-card__body { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 22px 20px; }
.sc .sc-card__title { font-size: 1.75rem; }
.sc .sc-card__head .sc-price { margin-top: 8px; }
.sc .sc-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding-block: 18px; border-block: 1px solid var(--sc-line); }
.sc .sc-card__specs dt { font-size: .8125rem; color: var(--sc-ink-4); }
.sc .sc-card__specs dd { margin-top: 2px; font-weight: 700; font-size: 1.0625rem; }
.sc .sc-card__bullets { flex: 1; margin: 0; padding-left: 18px; list-style: disc; display: grid; align-content: start; gap: 8px; font-size: .9375rem; line-height: 1.45; color: var(--sc-ink-2); }
.sc .sc-actions--card { margin-top: auto; }
.sc .sc-actions--card .sc-btn { width: 100%; min-height: 52px; padding: 14px; font-size: 1rem; border-width: 2px; border-color: #000; }
.sc .sc-actions--card .sc-btn--primary { background: #000; }
.sc .sc-actions--card .sc-btn--primary:hover { background: var(--sc-accent); border-color: var(--sc-accent); }
/* Carousel dots (product.js) */
.sc .sc-dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
.sc .sc-dots button { width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.sc .sc-dots button::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: #ccc; transition: width .2s ease, background-color .2s ease; }
.sc .sc-dots button[aria-current="true"]::before { width: 22px; background: var(--sc-ink); }

/* ---------- 8 Banner ---------- */
.sc .sc-banner-wrap { padding-block: 0 8px; }
.sc .sc-banner-wrap--joined { padding-block: 16px 24px; }
.sc .sc-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; background: var(--sc-dark); color: var(--sc-dark-ink); border-radius: var(--sc-radius); padding: 24px; }
.sc .sc-banner__text { display: grid; gap: 6px; }
.sc .sc-banner__title { font-size: 1.5rem; line-height: 1.1; }
.sc .sc-banner p { color: #d6d6d6; font-size: .9375rem; line-height: 1.45; }
.sc .sc-banner .sc-btn { padding: 13px 24px; border-width: 0; }

/* ---------- 9 Gallery ---------- */
.sc .sc-gallery { padding-block: var(--sc-section); }
.sc .sc-gallery__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.sc .sc-seg { display: inline-flex; gap: 4px; background: var(--sc-sand); border-radius: var(--sc-radius-pill); padding: 4px; }
.sc .sc-seg button { border: 0; background: transparent; color: var(--sc-ink); border-radius: var(--sc-radius-pill); padding: 11px 20px; font: 600 .9375rem/1.2 var(--sc-font-body); cursor: pointer; }
.sc .sc-seg button:hover { background: transparent; color: var(--sc-ink); }
.sc .sc-seg button[aria-selected="true"] { background: var(--sc-ink); color: var(--sc-paper); }
.sc .sc-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; }
.sc .sc-gallery__grid + .sc-gallery__grid { margin-top: 8px; } /* no-JS: both groups visible */
.sc .sc-gallery__grid[hidden] { display: none; }
.sc .sc-gallery__item { display: block; border-radius: 10px; overflow: hidden; background: #eee; cursor: zoom-in; }
.sc .sc-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sc .sc-gallery__item:hover img { transform: scale(1.03); }
.sc .sc-gallery__grid:not(.sc-gallery__grid--few) .sc-gallery__item:first-of-type { grid-column: span 2; grid-row: span 2; }

/* Lightbox (native <dialog>, built by product.js) */
.sc .sc-lightbox { border: 0; padding: 16px; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; background: rgb(0 0 0 / .92); color: #fff; }
.sc .sc-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.sc .sc-lightbox::backdrop { background: rgb(0 0 0 / .92); }
.sc .sc-lightbox figure { margin: 0; width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 12px; }
.sc .sc-lightbox img { width: 100%; max-height: 80vh; object-fit: contain; display: block; }
.sc .sc-lightbox figcaption { display: flex; justify-content: space-between; gap: 16px; color: #ddd; font: 400 .875rem/1.4 var(--sc-font-body); }
.sc .sc-lightbox button { position: absolute; background: none; border: 0; border-radius: 0; padding: 0; color: #fff; cursor: pointer; font-family: var(--sc-font-body); }
.sc .sc-lightbox [data-close] { top: 20px; right: 24px; min-height: 44px; padding: 0 8px; font-size: .9375rem; font-weight: 600; }
.sc .sc-lightbox [data-prev], .sc .sc-lightbox [data-next] { top: 50%; translate: 0 -50%; width: 56px; height: 56px; font-size: 2.5rem; line-height: 1; }
.sc .sc-lightbox [data-prev] { left: 8px; }
.sc .sc-lightbox [data-next] { right: 8px; }
.sc .sc-lightbox.is-in figure { animation: sc-lb-zoom .36s cubic-bezier(.2, .8, .2, 1); }
.sc .sc-lightbox.is-next figure { animation: sc-lb-next .34s cubic-bezier(.2, .8, .2, 1); }
.sc .sc-lightbox.is-prev figure { animation: sc-lb-prev .34s cubic-bezier(.2, .8, .2, 1); }
@keyframes sc-lb-zoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sc-lb-next { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes sc-lb-prev { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }

/* ---------- 10 Specs & downloads ---------- */
.sc .sc-specs { padding-block: var(--sc-section); }
.sc .sc-specs .sc-h2 { margin-bottom: 24px; }

/* Phone cards (button accordions, product.js) */
.sc .sc-acc { background: var(--sc-paper); border-radius: var(--sc-radius); overflow: hidden; }
.sc .sc-acc + .sc-acc, .sc .sc-acc--downloads { margin-top: 16px; }
.sc .sc-acc__head {
	position: relative; width: 100%; min-height: 72px; display: flex; align-items: center; gap: 14px;
	padding: 14px 48px 14px 18px; background: none; border: 0; border-radius: 0; text-align: left; cursor: pointer; color: var(--sc-ink); font: inherit; white-space: normal;
}
.sc .sc-acc__head::after { right: 18px; }
.sc .sc-acc__icon { flex: none; width: 44px; height: 44px; border-radius: var(--sc-radius-sm); background: var(--sc-sand); display: grid; place-items: center; color: var(--sc-accent); }
.sc .sc-acc__opened { display: none; }
.sc .sc-acc.is-open .sc-acc__opened { display: inline; }
.sc .sc-acc.is-open .sc-acc__closed { display: none; }
.sc .sc-acc__label { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sc .sc-acc__title { font-size: 1.375rem; }
.sc .sc-acc__meta { font-size: .8125rem; line-height: 1.35; color: var(--sc-ink-3); }
@media (max-width: 899px) {
	.sc-js .sc .sc-acc[data-sc-acc]:not(.is-open) > .sc-acc__panel { display: none; }
}

/* The specs table. Phones: each row = label line + one column per version. */
.sc .sc-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .875rem; }
/* Neutralise theme table styles (Hello Elementor: cell borders, zebra rows, hover tint). */
.sc .sc-table :is(th, td) { border: 0; background: transparent; }
.sc .sc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sc .sc-table, .sc .sc-table tbody, .sc .sc-table tr, .sc .sc-table th, .sc .sc-table td { display: block; }
.sc .sc-table__group { border-top: 1px solid #e8e8e8; padding: 0 18px; }
.sc .sc-table__group.is-open, html:not(.sc-js) .sc .sc-table__group { padding-bottom: 18px; }
.sc .sc-table__grouprow th { padding: 0; min-height: 60px; display: flex; align-items: center; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.sc .sc-table__toggle { position: relative; width: 100%; min-height: 60px; padding: 0 32px 0 0; background: none; border: 0; border-radius: 0; white-space: normal; text-align: left; cursor: pointer; color: var(--sc-ink); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.sc .sc-table tr:not(.sc-table__grouprow) { display: grid; grid-template-columns: repeat(var(--sc-cols), minmax(0, 1fr)); gap: 5px 8px; padding-block: 12px; border-bottom: 1px solid #eee; }
.sc .sc-table tbody th[scope="row"] { grid-column: 1 / -1; font-size: .8125rem; font-weight: 400; color: #555; text-align: left; }
.sc .sc-table td { font-weight: 600; line-height: 1.3; text-align: left; }
.sc .sc-table .sc-table__names { padding: 0 0 8px; border-bottom: 2px solid var(--sc-ink); }
.sc .sc-table__names td { font: 700 1rem/1.1 var(--sc-font-display); text-transform: var(--sc-display-case); }
.sc .sc-table__names td:first-child { display: none; }
.sc .sc-none { color: var(--sc-ink-3); font-weight: 400; }
@media (max-width: 899px) {
	.sc-js .sc .sc-table__group:not(.is-open) tr:not(.sc-table__grouprow) { display: none; }
}

/* Downloads */
.sc .sc-downloads__intro p { margin-top: 12px; font-size: 1rem; line-height: 1.55; color: #444; text-wrap: pretty; }
.sc .sc-downloads__list { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 6px; }
.sc .sc-download { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--sc-sand-2); border-radius: var(--sc-radius-sm); color: var(--sc-ink); text-decoration: none; }
.sc .sc-download:hover { box-shadow: 0 0 0 2px var(--sc-ink); color: var(--sc-ink); }
.sc .sc-download__doc { flex: none; color: var(--sc-accent); }
.sc .sc-download__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sc .sc-download__title { font-weight: 600; font-size: .9375rem; }
.sc .sc-download__meta { font-size: .8125rem; color: var(--sc-ink-4); }
.sc .sc-download__arrow { flex: none; }

/* ---------- 11 FAQ ---------- */
.sc .sc-faq { padding-block: var(--sc-section); }
.sc .sc-faq__grid { display: grid; gap: 24px; }
.sc .sc-faq__list { border-top: 1px solid var(--sc-line-2); }
.sc .sc-faq__item { border-bottom: 1px solid var(--sc-line-2); }
.sc .sc-faq__item summary { list-style: none; cursor: pointer; position: relative; padding: 18px 40px 18px 0; }
.sc .sc-faq__item summary::-webkit-details-marker { display: none; }
.sc .sc-faq__q { font: 600 1.0625rem/1.35 var(--sc-font-body); }
.sc .sc-faq__a { padding: 0 0 20px; font-size: 1rem; line-height: 1.6; color: #444; }

/* ---------- 12 Related ---------- */
.sc .sc-related { padding-block: 24px 48px; }
.sc .sc-related__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
.sc .sc-link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sc-ink); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.sc .sc-link-arrow::after { content: "→"; }
.sc .sc-link-arrow:hover { color: var(--sc-accent); }
.sc .sc-cards--related { grid-auto-columns: 260px; }
.sc .sc-card--link { border-color: #e3e3e3; transition: border-color .15s; }
.sc .sc-card--link:hover { border-color: var(--sc-ink); }
.sc .sc-card--link a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.sc .sc-card--link .sc-card__media { aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #ece7e1 0 12px, #e4ded6 12px 24px); }
.sc .sc-card--link .sc-card__media img { aspect-ratio: 16 / 10; height: 100%; }
.sc .sc-card--link .sc-card__body { padding: 18px; gap: 14px; }
.sc .sc-card--link .sc-card__head { display: grid; gap: 4px; }
.sc .sc-card--link .sc-card__title { font-size: 1.5rem; }
.sc .sc-card__specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-block: 14px 0; border-bottom: 0; }
.sc .sc-card__specs--3 dt { font-size: .75rem; }
.sc .sc-card__specs--3 dd { font-size: .9375rem; }

/* ---------- 13 Badges (not in Design v1; global, shown when set) ---------- */
.sc .sc-badges { padding-block: 32px; border-top: 1px solid var(--sc-line); }
.sc .sc-badges__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.sc .sc-badge { display: grid; gap: 4px; justify-items: start; }
.sc .sc-badge__icon { width: 36px; height: 36px; object-fit: contain; }
.sc .sc-badge__label { font-weight: 600; }
.sc .sc-badge__text { font-size: .8125rem; color: var(--sc-ink-3); }

/* ---------- 14 Footnotes ---------- */
.sc .sc-footnotes { padding-block: 0 40px; }
.sc .sc-footnotes__list { margin: 0; padding: 20px 0 0 18px; border-top: 1px solid #e3e3e3; display: grid; gap: 8px; font-size: .8125rem; line-height: 1.5; color: var(--sc-note); max-width: 960px; }
.sc .sc-footnotes__list li { scroll-margin-top: calc(var(--sc-header-h) + var(--sc-subnav-h) + 16px); }
.sc .sc-footnotes__list li:target { color: var(--sc-ink); background: #fff7d6; }

/* ---------- 15 Final CTA (not in Design v1; shown when a heading is set) ---------- */
.sc .sc-cta { padding-block: 40px; }
.sc .sc-cta__inner { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.sc .sc-cta__title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.sc .sc-cta p { color: var(--sc-ink-2); margin-top: 6px; }

.sc .sc-notices:empty { display: none; }
.sc .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }

.sc .sc-gallery__grid--few .sc-gallery__item:first-of-type { grid-column: auto; grid-row: auto; }

/* Phones only: the key stats and the breadcrumb are part of the phone intro. */
@media (min-width: 900px) {
	.sc .sc-intro .sc-stats, .sc .sc-intro .sc-crumbs, .sc .sc-intro--stats-only { display: none; }
}

/* ================= ≥ 600 px (large phones, small tablets) ================= */
@media (min-width: 600px) {
	.sc .sc-badges__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sc .sc-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 180px; }
	.sc .sc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================= ≥ 900 px: desktop layout ================= */
@media (min-width: 900px) {
	/* 1 Hero */
	.sc .sc-hero { height: clamp(520px, 70vh, 760px); min-height: 0; }
	.sc .sc-hero__media::after { background: linear-gradient(90deg, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / 0) 70%); }
	.sc .sc-hero__content { padding-block: 64px 96px; gap: 20px; }
	.sc .sc-hero__content > * { max-width: 620px; }
	.sc .sc-hero .sc-eyebrow { font-size: .875rem; }
	.sc .sc-price--hero { font-size: 1.125rem; gap: 2px 10px; }
	.sc .sc-price--hero .sc-price__amount { font-size: 2.125rem; }
	.sc .sc-price--hero .sc-price__tax { font-size: .875rem; }

	/* 2 Sub-nav: one row */
	.sc .sc-subnav__inner { display: flex; gap: clamp(14px, 1.4vw, 20px); height: var(--sc-subnav-h); padding-inline: var(--sc-gutter); }
	.sc .sc-subnav__name { flex: none; height: auto; line-height: 1; overflow: visible; padding-right: clamp(14px, 1.4vw, 20px); border-right: 1px solid var(--sc-line-2); }
	.sc .sc-subnav__scroller {
		flex: 1 1 auto; margin: 0; padding: 0; border: 0; align-self: stretch;
		/* fade the edge so a cut-off link reads as "scroll for more" (long Finnish labels) */
		mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
	}
	.sc .sc-subnav__links { height: 100%; gap: clamp(16px, 1.6vw, 28px); padding-right: 24px; }
	.sc .sc-subnav__links a {
		font-size: clamp(14px, 1.15vw, 15px); font-weight: 600; color: var(--sc-ink-3);
		box-shadow: none; border-bottom: 3px solid transparent; padding-top: 3px;
		transition: color .25s, border-color .35s;
	}
	.sc .sc-subnav__links a:hover { color: #000; }
	.sc .sc-subnav__links a.is-active { color: #000; box-shadow: none; border-bottom-color: var(--sc-accent); }
	.sc .sc-actions--subnav { flex: none; gap: 10px; }
	.sc .sc-actions--subnav .sc-btn { min-height: 38px; padding: 8px 22px; }
	.sc .sc-actions--subnav .sc-btn--primary { background: var(--sc-ink); border-color: var(--sc-ink); padding-inline: 26px; }
	.sc .sc-actions--subnav .sc-btn--primary:hover { background: var(--sc-accent); border-color: var(--sc-accent); }

	/* 3 Intro */
	.sc .sc-intro { padding-block: 72px; }
	.sc .sc-intro__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
	.sc .sc-intro .sc-lead { padding-top: 4px; }

	/* 5 Features: alternating rows */
	.sc .sc-features { padding-block: var(--sc-section); }
	.sc .sc-features__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.sc .sc-features__list { gap: 96px; }
	.sc .sc-feature { flex-direction: row; align-items: center; gap: 80px; border: 0; border-radius: 0; overflow: visible; background: none; }
	.sc .sc-feature:nth-child(even) { flex-direction: row-reverse; }
	.sc .sc-feature--noimg, .sc .sc-feature--noimg:nth-child(even) { flex-direction: row; }
	.sc .sc-feature__media { flex: 0 0 52%; border-radius: var(--sc-radius); overflow: hidden; background: #eee; }
	.sc .sc-feature__media img { aspect-ratio: 4 / 3; }
	.sc .sc-feature__body { flex: 1; gap: 16px; padding: 0; }
	.sc .sc-feature--noimg .sc-feature__body { max-width: 720px; }
	.sc .sc-feature__num { font-size: 1rem; }
	.sc .sc-feature__title { line-height: 1; }
	.sc .sc-feature__text { font-size: 1.125rem; line-height: 1.6; }

	/* 6 More features */
	.sc .sc-more .sc-tabs__bar { background: var(--sc-paper); }

	/* 7 Versions: row of cards */
	.sc .sc-versions { padding-block: var(--sc-section) 40px; }
	.sc .sc-versions .sc-wrap { gap: 40px; }
	.sc .sc-cards { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; overflow: visible; margin-inline: 0; padding: 0; align-items: stretch; }
	.sc .sc-card__body { padding: 28px; gap: 20px; }
	.sc .sc-card__title { font-size: 2rem; }
	.sc .sc-dots { display: none; }

	/* 8 Banner: one row */
	.sc .sc-banner-wrap { padding-block: 0 24px; }
	.sc .sc-banner-wrap--joined { padding-block: 0 24px; }
	.sc .sc-banner { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px 32px; }
	.sc .sc-banner__text { gap: 4px; }
	.sc .sc-banner__title { font-size: 1.625rem; }
	.sc .sc-banner .sc-btn { padding: 13px 28px; white-space: nowrap; }

	/* 9 Gallery */
	.sc .sc-gallery__head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
	.sc .sc-seg button { padding: 10px 22px; }
	.sc .sc-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 12px; }
	.sc .sc-gallery__grid + .sc-gallery__grid { margin-top: 12px; }
	.sc .sc-gallery__item { border-radius: var(--sc-radius-sm); }
	.sc .sc-gallery__grid--few { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 260px; }
	.sc .sc-lightbox { padding: 48px; }
	.sc .sc-lightbox [data-prev] { left: 16px; }
	.sc .sc-lightbox [data-next] { right: 16px; }

	/* 10 Specs: one open table + downloads beside their intro */
	.sc .sc-specs .sc-h2 { margin-bottom: 40px; }
	.sc .sc-acc { background: none; border-radius: 0; overflow: visible; }
	.sc .sc-acc__head { display: none; }
	.sc .sc-acc--downloads { margin-top: 0; }
	.sc .sc-table { display: table; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--sc-paper); border-radius: var(--sc-radius); overflow: hidden; font-size: 1rem; }
	.sc .sc-table thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: table-header-group; }
	.sc .sc-table tbody { display: table-row-group; padding: 0; border: 0; }
	.sc .sc-table tr, .sc .sc-table tr:not(.sc-table__grouprow) { display: table-row; padding: 0; border: 0; }
	.sc .sc-table th, .sc .sc-table td { display: table-cell; vertical-align: top; text-align: left; }
	.sc .sc-table thead td:first-child { width: 28%; }
	.sc .sc-table thead th, .sc .sc-table thead td { padding: 20px 24px; border-bottom: 2px solid var(--sc-ink); }
	.sc .sc-table thead th { font: 700 1.375rem/1.1 var(--sc-font-display); text-transform: var(--sc-display-case); }
	.sc .sc-table__grouprow th { display: table-cell; min-height: 0; padding: 28px 24px 10px; font-size: .8125rem; font-weight: 600; color: var(--sc-accent); }
	.sc .sc-table__names { display: none !important; }
	.sc .sc-table tbody th[scope="row"] { padding: 14px 24px; font-weight: 500; font-size: 1rem; color: #555; border-top: 1px solid #e8e8e8; }
	.sc .sc-table tbody td { padding: 14px 24px; font-weight: 600; line-height: 1.4; border-top: 1px solid #e8e8e8; }
	.sc .sc-table__group.is-open { padding: 0; }
	.sc .sc-downloads { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
	.sc .sc-downloads__intro .sc-h3 { font-size: 2rem; }
	.sc .sc-downloads__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; }
	.sc .sc-download { background: var(--sc-paper); padding: 18px 20px; }

	/* 11 FAQ */
	.sc .sc-faq__grid { grid-template-columns: 400px minmax(0, 1fr); gap: 80px; align-items: start; }
	.sc .sc-faq__grid .sc-h2 { position: sticky; top: calc(var(--sc-top, var(--sc-header-h)) + var(--sc-subnav-h) + 32px); }
	.sc .sc-faq__item summary { padding: 22px 48px 22px 0; }
	.sc .sc-faq__q { font-size: 1.1875rem; line-height: 1.35; }
	.sc .sc-faq__item summary::after { font-size: 1.625rem; }
	.sc .sc-faq__a { max-width: 720px; padding-bottom: 24px; font-size: 1.0625rem; }

	/* 12 Related */
	.sc .sc-related { padding-block: var(--sc-section) 72px; }
	.sc .sc-related__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
	.sc .sc-link-arrow { min-height: 0; white-space: nowrap; }
	.sc .sc-cards--related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sc .sc-card--link .sc-card__body { padding: 24px; gap: 18px; }
	.sc .sc-card--link .sc-card__title { font-size: 1.75rem; }
	.sc .sc-card__specs--3 { gap: 12px; padding-top: 16px; }
	.sc .sc-card__specs--3 dd { font-size: 1rem; }

	/* 14 Footnotes */
	.sc .sc-footnotes { padding-block: 0 56px; }
	.sc .sc-footnotes__list { padding: 24px 0 0 20px; }
}

/* Mid-size laptops: keep the sub-nav calm when labels are long (FI) — drop the secondary button. */
@media (min-width: 900px) and (max-width: 1179px) {
	.sc .sc-actions--subnav .sc-btn--secondary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sc *, .sc .sc-lightbox * { transition: none !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}