/* ==========================================================================
   Digmi – designsystem och komponenter
   Tokens kommer från theme.json (--wp--preset--*). Här: komponenter och rörelse.
   ========================================================================== */

:root {
	--ink: #111111;
	--graphite: #4A4640;
	--stone: #8A8173;
	/* Sten för liten text: minst 4,5:1 mot varmvit, papper, sand och vitt. */
	--stone-text: #6B6358;
	--line: #E4DED4;
	--sand: #E7E1D6;
	--paper: #FBFAF7;
	--warm: #F4F1EC;
	--live-soft: #5BD18B;
	--cta-green: #1F7A45;
	--cta-green-hover: #17603A;
	--gutter: clamp(1rem, 4.5vw, 5rem);
	--max: 1312px;
	--radius: 10px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--ease-in-out: cubic-bezier(.75, 0, .2, 1);
	--section: clamp(5.5rem, 11vw, 10rem);
	--serif: 'Instrument Serif', Georgia, serif;
	--sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.has-menu-open { overflow: hidden; }
body { margin: 0; overflow-x: clip; background: var(--warm); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.site-main > * { margin-block: 0; }
.site-main > * + * { margin-top: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.ihero :focus-visible, .home-hero :focus-visible, .site-header--overlay :focus-visible, .section--ink :focus-visible, .site-menu :focus-visible, .cta :focus-visible { outline-color: #FFFFFF; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: #FFF; border-radius: 6px; }
.skip-link:focus { top: 1rem; }

/* ---------- Typografi ---------- */
.eyebrow { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--graphite); }
.eyebrow--rule { display: flex; align-items: center; gap: 1rem; }
.eyebrow--rule::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .6; }
.accent-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
.h-display { margin: 0; font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: .98; font-weight: 600; letter-spacing: -0.035em; }
.h-section { margin: 0; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.025em; }
.lead-muted { margin: 0; max-width: 34rem; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; color: var(--graphite); }
.text-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: inherit; text-underline-offset: .25em; }
.text-link svg, .btn--green svg { transition: transform .3s var(--ease); }
.text-link:hover svg, .btn--green:hover svg { transform: translateX(4px); }

/* ---------- Knappar ---------- */
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 1rem 1.75rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: #FFF; font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--sm { min-height: 44px; padding: .8rem 1.35rem; font-size: .9375rem; }
.btn--outline { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #FFF; }
.btn--light { background: #FFF; border-color: #FFF; color: var(--ink); }
/* Grön CTA: --cta-green ger minst 4,5:1 mot vit text (live-grönt räcker inte för 16px). */
.btn--green { background: var(--cta-green); border-color: var(--cta-green); color: #FFF; }
.btn--green:hover { background: var(--cta-green-hover); border-color: var(--cta-green-hover); }
.btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .8); color: #FFF; padding-left: .6rem; }
.btn--ghost-light .play { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.btn--ghost-light:not(:has(.play)) { padding-left: 1.75rem; }
.pill { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .7rem 1.25rem; border: 1.5px solid #D9D2C6; border-radius: 999px; background: rgba(255, 255, 255, .5); color: var(--ink); font: 500 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pill:hover { background: var(--ink); color: #FFF; border-color: var(--ink); }
.pill--sm { min-height: 36px; padding: .5rem .9rem; font-size: .8125rem; font-weight: 600; border-color: var(--ink); justify-content: center; }
.link-button { background: none; border: 0; padding: 1rem; font: 600 1rem var(--sans); text-decoration: underline; cursor: pointer; color: inherit; }
.glass { background: rgba(20, 16, 12, .45); border: 1px solid rgba(255, 255, 255, .2); color: #FFF; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---------- Live-indikatorer ---------- */
.live-pill { display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .75); font-size: .8125rem; color: var(--graphite); }
.live-pill strong { color: var(--ink); letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }

/* ==========================================================================
   Levande skärm (.ls)
   ========================================================================== */
.ls { position: relative; margin: 0; overflow: hidden; background: #1A1714; }
.ls__stage { position: absolute; inset: 0; transition: transform 1.4s var(--ease); }
.ls picture, .ls__img { display: block; width: 100%; height: 100%; }
.ls__img { object-fit: cover; }
.ls__device { position: absolute; left: 0; top: 0; transform-origin: 0 0; padding: var(--ls-bezel, 10px); border-radius: calc(var(--ls-bezel, 10px) * .4); background: linear-gradient(160deg, #2b2b2e 0%, #0d0d0f 34%, #050506 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .14), 0 36px 70px -18px rgba(0, 0, 0, .6), 0 0 90px 8px color-mix(in srgb, var(--ls-glow, #FFF) 14%, transparent); opacity: 0; transition: opacity .6s ease, box-shadow 1.2s ease; }
.ls.is-ready .ls__device { opacity: 1; }
.ls__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; background: #000; filter: brightness(.93) saturate(.92) contrast(.97); }
.ls__shade { position: absolute; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 calc(var(--ls-bezel, 10px) * 2.4) rgba(0, 0, 0, .38); background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .14) 100%); }
.ls__slide { position: absolute; inset: 0; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: var(--ls-pad, 24px); background: var(--s-bg); color: var(--s-fg); clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-in-out); }
.ls__slide.is-prev { z-index: 2; clip-path: inset(0 0 0 0); }
.ls__slide.is-current { z-index: 3; clip-path: inset(0 0 0 0); }
.ls__k, .ls__f { font-size: var(--ls-ks, 11px); letter-spacing: .2em; text-transform: uppercase; opacity: .85; line-height: 1.3; }
.ls__t { font-size: var(--ls-fs, 40px); line-height: .98; }
.ls__t--serif { font-family: var(--serif); }
.ls__t--sans { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; }
.ls__slide.is-current .ls__t { animation: rise 1s var(--ease) .25s both; }
.ls__glass { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 28%, rgba(255, 255, 255, 0) 44%); }
@keyframes rise { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: none; } }

/* Platt skärm utan foto (Inte en TV) */
.ls-flat { position: relative; overflow: hidden; container-type: inline-size; --ls-fs: min(56px, 16cqi); --ls-ks: 11px; --ls-pad: min(26px, 9cqi); }

/* ==========================================================================
   Sidhuvud och meny
   ========================================================================== */
.site-header { position: relative; z-index: 20; }
.site-header--overlay { position: absolute; inset: 0 0 auto 0; color: #FFF; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem var(--gutter) 0; }
.brand { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.045em; color: inherit; text-decoration: none; line-height: 1; }
.brand sup { font-size: .6rem; font-weight: 500; letter-spacing: 0; }
.site-header__tagline { margin-left: auto; font-size: .75rem; letter-spacing: .26em; text-transform: uppercase; color: var(--graphite); }
.site-header__nav { display: flex; gap: 2.25rem; padding: .75rem 1.75rem; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-header__nav a { color: #FFF; text-decoration: none; font-weight: 500; font-size: .9375rem; }
.site-header__nav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.lang-switch { display: flex; gap: .15rem; font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.lang-switch a { display: grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0 .35rem; border-radius: 999px; color: inherit; text-decoration: none; opacity: .6; }
.lang-switch a:hover, .lang-switch a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: .3em; }
.lang-switch a[aria-current] { opacity: 1; box-shadow: inset 0 0 0 1px currentColor; }
.site-menu__top .lang-switch { display: none; margin-left: auto; margin-right: 1rem; font-size: .875rem; }
@media (max-width: 720px) {
	.site-header__actions .lang-switch { display: none; }
	.site-menu__top .lang-switch { display: flex; }
}
.menu-toggle { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; color: inherit; cursor: pointer; }

.site-menu { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: #0F0E0D; color: #FFF; animation: menuIn .5s var(--ease) both; }
.site-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.site-menu__inner { min-height: 100%; box-sizing: border-box; padding: 2rem var(--gutter) 3rem; display: flex; flex-direction: column; gap: 3rem; }
.site-menu__top { display: flex; justify-content: space-between; align-items: center; }
.site-menu__close { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: transparent; color: #FFF; cursor: pointer; }
.site-menu__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.site-menu .eyebrow { color: rgba(255, 255, 255, .6); margin-bottom: 1rem; }
.site-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-menu a { color: #FFF; text-decoration: none; }
/* Den vita knappen i menyn: .site-menu a ovan väger mer än .btn--light och gav vit text på vit knapp. */
.site-menu .btn--light { color: var(--ink); }
.site-menu__col--big > ul a { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 600; letter-spacing: -0.02em; }
.site-menu__col--big > ul a svg { transition: transform .3s var(--ease); }
.site-menu__col--big > ul a:hover svg { transform: translateX(6px); }
.site-menu__small { margin-top: 1.5rem !important; display: flex !important; flex-wrap: wrap; gap: .5rem 1.5rem !important; }
.site-menu__small a, .site-menu__col:not(.site-menu__col--big) a { font-size: 1.125rem; color: rgba(255, 255, 255, .85); }
.site-menu__small a:hover, .site-menu__col a:hover { color: #FFF; text-decoration: underline; text-underline-offset: .3em; }

/* ==========================================================================
   Försättssida
   ========================================================================== */
.landing-hero { position: relative; overflow-x: clip; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem); text-align: center; }
.landing-hero__light { position: absolute; inset: -40% -10% auto -30%; height: 1200px; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(62deg, rgba(60, 45, 30, .06) 0 70px, transparent 70px 190px); filter: blur(28px); }
.landing-hero__title { margin: .25rem 0 0; max-width: 22ch; font-size: clamp(2.75rem, 6.4vw, 5.25rem); line-height: .98; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
.landing-hero__line { display: block; }
.landing-hero__title em { font-weight: 400; letter-spacing: -0.02em; color: #6B5A48; }
.landing-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .4rem; }
.landing-hero__down svg { transform: rotate(90deg); }
/* Dekor: frågan och de roterande orden – knorren ovanför är rubriken. */
.landing-hero__words { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3em; margin: .6rem 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.1; color: #6B5A48; }
.landing-hero__question { flex-basis: 100%; font-family: var(--sans); font-style: normal; font-size: .75rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--graphite); margin-bottom: .35rem; }
.words { display: inline-block; height: 1.3em; overflow: hidden; text-align: left; white-space: nowrap; transition: width .8s var(--ease-in-out); }
.words__list { display: flex; flex-direction: column; align-items: flex-start; transform: translateY(calc(var(--i, 0) * -1.3em)); transition: transform .8s var(--ease-in-out); }
.words__list span { display: block; height: 1.3em; line-height: 1.3em; padding-right: .08em; }
.landing-hero__kicker { max-width: 46rem; line-height: 1.6; text-wrap: balance; }
.landing-hero__intro { margin: .4rem 0 0; max-width: 44rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }

/* Startsidans hero: mörk med ett nedtonat foto som tonar ut (som branschsidorna), en skärm med riktig kampanj och appen i en lutad mobil. */
.home-hero { position: relative; isolation: isolate; overflow: hidden; background: #1A1714; color: #FFF; }
.home-hero__photo { position: absolute; inset: 0 0 0 auto; z-index: 0; width: min(62.5%, 1000px); }
.home-hero__photo picture, .home-hero__photoimg { display: block; width: 100%; height: 100%; }
.home-hero__photoimg { object-fit: cover; filter: brightness(.55) saturate(.9); }
.home-hero__fade { position: absolute; inset: 0; background: linear-gradient(90deg, #1A1714 0%, rgba(26, 23, 20, .6) 35%, rgba(26, 23, 20, 0) 70%), linear-gradient(to top, #1A1714 0%, rgba(26, 23, 20, 0) 30%); }
.home-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; box-sizing: border-box; padding: clamp(8rem, 12vw, 10rem) var(--gutter) clamp(4rem, 8vw, 6.5rem); }
.home-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.home-hero__kicker { display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: .55rem 1rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .8125rem; font-weight: 500; color: rgba(255, 255, 255, .88); }
.home-hero__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cta-green); }
.home-hero__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--cta-green); opacity: 0; animation: heroPulse 2.4s ease-out infinite; }
@keyframes heroPulse { from { transform: scale(.5); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.home-hero__title { margin: 0; font-size: clamp(2.75rem, 5.4vw, 4.875rem); line-height: .98; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance; }
.home-hero__title em { color: #D9C3A5; letter-spacing: -0.02em; }
.home-hero__lead { margin: 0; max-width: 34rem; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.home-hero__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .25rem 0 0; padding: 0; list-style: none; font-size: .9375rem; color: rgba(255, 255, 255, .8); }
.home-hero__facts li { display: flex; align-items: center; gap: .5rem; }
.home-hero__facts li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(120, 200, 150, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BE0B4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* Scenen: skärmen uppe till höger med kampanjens färger som glöd, mobilen lutad framför och två kort från appen. */
.home-hero__stage { position: relative; aspect-ratio: 1 / .9; width: 100%; max-width: 620px; justify-self: end; }
.home-hero__glow { position: absolute; top: 4%; right: -6%; width: 96%; height: 56%; z-index: -1; border-radius: 40px; background: linear-gradient(120deg, #F5A9C0, #FFD27A 40%, #9FD8C4 70%, #C9B6F0); filter: blur(60px) saturate(1.2); opacity: .25; }
.home-hero__tv { position: absolute; top: 6%; right: -2%; width: 92%; aspect-ratio: 16 / 9; margin: 0; box-sizing: border-box; padding: 1.6%; border-radius: 12px; background: linear-gradient(160deg, #2b2b2e, #0b0b0c 35%, #050506); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -30px rgba(0, 0, 0, .8); }
/* Bildspelet på skärmen: en kampanj var fjärde sekund, med zoom på bilden och texten som glider in. */
/* isolation: slidernas z-index (övertoningen) stannar inne i skärmen och hamnar aldrig över mobilen. */
.home-hero__slides { position: relative; isolation: isolate; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #111; container-type: inline-size; --dur: 28s; }
/* Utan skript eller med reducerad rörelse står första kampanjen still; bildspelet startar först när initHeroTv satt is-ready. */
.home-hero__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; }
.home-hero__slide:first-child { opacity: 1; }
.home-hero__slide--wella { grid-template-columns: 1fr; }
.home-hero__slide picture { overflow: hidden; }
.home-hero__slideimg { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Första bilden står redan där tvZoomFirst börjar (1.14), så den hoppar inte när bildspelet startar. */
.home-hero__slide:first-child .home-hero__slideimg { transform: scale(1.14); }
.home-hero__panel { display: flex; flex-direction: column; justify-content: center; gap: 1.6cqi; padding: 0 6cqi; color: #FFF; }
.home-hero__slidekicker { font-size: 2.6cqi; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.home-hero__slidetitle { font-size: 7cqi; line-height: 1; letter-spacing: -0.03em; }
.home-hero__slidesub { font-size: 3cqi; font-weight: 500; }
.home-hero__slide--jarn .home-hero__panel { background: #F2B705; color: #111; }
.home-hero__slide--vard .home-hero__panel { background: #E8F3F1; color: #0F4C4A; }
.home-hero__slide--cafe .home-hero__panel { background: #5B3A29; }
.home-hero__slide--golf .home-hero__panel { background: #1F5133; }
.home-hero__slide--gym .home-hero__panel { background: #16161A; }
.home-hero__slide--blommor .home-hero__panel { background: #B63E5E; }
/* Fördröjningen räknas från --i på varje animerat element (bilden ligger i en <picture>, så inherit ger fel värde). */
@media (prefers-reduced-motion: no-preference) {
	.home-hero__tv.is-ready .home-hero__slide { animation: tvSlide var(--dur) linear infinite both; animation-delay: calc(var(--i) * 4s); }
	.home-hero__tv.is-ready .home-hero__slide:first-child { animation-name: tvSlideFirst; }
	.home-hero__tv.is-ready .home-hero__slideimg { animation: tvZoom var(--dur) ease-out infinite both; animation-delay: calc(var(--i) * 4s); }
	.home-hero__tv.is-ready .home-hero__slide:first-child .home-hero__slideimg { animation-name: tvZoomFirst; }
	.home-hero__tv.is-ready .home-hero__panel { clip-path: inset(0 0 0 100%); animation: tvWipe var(--dur) cubic-bezier(.2, .8, .2, 1) infinite both; animation-delay: calc(var(--i) * 4s); }
	.home-hero__tv.is-ready .home-hero__panel > * { opacity: 0; animation: tvText var(--dur) cubic-bezier(.2, .8, .2, 1) infinite both; animation-delay: calc(var(--i) * 4s); }
	.home-hero__tv.is-ready .home-hero__panel > :nth-child(2) { animation-name: tvText2; }
	.home-hero__tv.is-ready .home-hero__panel > :nth-child(3) { animation-name: tvText3; }
}
/* Tidslinjen är räknad för 7 kampanjer à 4 s (28 s): en kampanj = 14,3 % av varvet; nästa tonar in medan den förra tonar ut. */
/* Riktig övertoning: nästa kampanj tonar in ovanpå (z-index 3) medan den förra ligger kvar helt synlig under (z-index 1). */
@keyframes tvSlide { 0% { opacity: 0; z-index: 3; } 2% { opacity: 1; } 14.3% { opacity: 1; z-index: 3; } 14.31% { z-index: 1; } 16.5% { opacity: 1; } 16.6% { opacity: 0; } 100% { opacity: 0; z-index: 1; } }
/* Första kampanjen syns direkt vid sidladdning och tonar in ovanpå den sista (z-index 4) när varvet börjar om. */
@keyframes tvSlideFirst { 0% { opacity: 1; z-index: 4; } 14.3% { opacity: 1; z-index: 4; } 14.31% { z-index: 1; } 16.5% { opacity: 1; } 16.6% { opacity: 0; } 97.9% { opacity: 0; z-index: 4; } 100% { opacity: 1; z-index: 4; } }
@keyframes tvZoom { 0% { transform: scale(1.14); } 16.5% { transform: scale(1); } 100% { transform: scale(1); } }
/* Första bilden tonar in igen i slutet av varvet: den står redan på 1.14 då, så zoomen börjar om utan hopp. */
@keyframes tvZoomFirst { 0% { transform: scale(1.14); } 16.5% { transform: scale(1); } 16.6%, 100% { transform: scale(1.14); } }
@keyframes tvWipe { 0% { clip-path: inset(0 0 0 100%); } 3% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes tvText { 0%, 2.5% { opacity: 0; transform: translateY(3cqi); } 5% { opacity: 1; transform: none; } 13.5% { opacity: 1; transform: none; } 15%, 100% { opacity: 0; } }
@keyframes tvText2 { 0%, 3% { opacity: 0; transform: translateY(3cqi); } 5.5% { opacity: 1; transform: none; } 13.5% { opacity: 1; transform: none; } 15%, 100% { opacity: 0; } }
@keyframes tvText3 { 0%, 3.5% { opacity: 0; transform: translateY(3cqi); } 6% { opacity: 1; transform: none; } 13.5% { opacity: 1; transform: none; } 15%, 100% { opacity: 0; } }
/* Pausknapp (WCAG 2.2.2) och paus när skärmen inte syns – alla delar pausas samtidigt så att de håller takten. */
.home-hero__tv.is-paused *, .home-hero__tv.is-offscreen * { animation-play-state: paused; }
.home-hero__pause { position: absolute; right: 3%; bottom: 5%; z-index: 4; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 17, 17, .65); color: #FFF; cursor: pointer; }
.home-hero__pause:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }
.home-hero__pause[hidden] { display: none; }
.home-hero__pause .home-hero__icon-play, .home-hero__pause[aria-pressed="true"] .home-hero__icon-pause { display: none; }
.home-hero__pause[aria-pressed="true"] .home-hero__icon-play { display: block; }

.home-hero__glass { position: absolute; inset: 1.6%; border-radius: 3px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, 0) 45%); }
.home-hero__phone { position: absolute; left: 4%; top: 30%; width: 36%; margin: 0; box-sizing: border-box; padding: 2.5%; border-radius: 13% / 6%; background: linear-gradient(145deg, #2c2c2f, #0a0a0b 40%, #1b1b1d); box-shadow: inset 0 0 0 1.5px #3a3a3d, 0 50px 90px -30px rgba(0, 0, 0, .6); transform: rotate(-7deg); }
.home-hero__app { display: block; width: 100%; height: auto; border-radius: 10% / 4.6%; }
.home-hero__card { position: absolute; z-index: 2; display: flex; align-items: center; gap: .65rem; box-sizing: border-box; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .92); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); font-size: .875rem; color: var(--ink); animation: heroFloat 6s ease-in-out infinite; }
.home-hero__card--live { right: 0; top: 70%; }
.home-hero__card--next { right: 14%; top: 84%; animation-delay: -3s; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.home-hero__check { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cta-green); color: #FFF; }
.home-hero__cardtext { display: flex; flex-direction: column; gap: .1rem; line-height: 1.25; }
.home-hero__cardlabel { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.home-hero__swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #C293D0; }
@media (prefers-reduced-motion: reduce) { .home-hero__card, .home-hero__dot::after { animation: none; } }
@media (max-width: 860px) {
	.home-hero__photo { width: 100%; }
	.home-hero__fade { background: linear-gradient(to top, #1A1714 30%, rgba(26, 23, 20, .7) 70%, rgba(26, 23, 20, .5)); }
}
@media (max-width: 560px) {
	.home-hero__stage { aspect-ratio: 1 / 1.05; }
	.home-hero__phone { top: 34%; width: 40%; }
	.home-hero__card { padding: .55rem .75rem; font-size: .75rem; border-radius: 13px; }
	.home-hero__card--live { top: 66%; }
	.home-hero__card--next { right: 0; top: 84%; }
}

/* Så fungerar det – tre steg */
.section.steps { display: flex; flex-direction: column; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.steps__title, .products__title, .industry-grid__title { text-align: center; }
/* Rubrikraden är ett eget barn i rutnätet: den ska aldrig ta en kortplats. */
.industry-grid__head { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps__item { display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.steps__number { font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; color: #6B5A48; }
.steps__name { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; }
.steps__text { color: var(--graphite); line-height: 1.5; }
/* Stegens bilder: en tv med registreringsvyn på signage.digmi.eu, mobilen med appen och tv:n med kampanjen.
   Bilden klipper (clip) i stället för att vara en dold rullyta: mobilen är avskuren, och sök-på-sidan skulle annars rulla den. */
.steps__art { position: relative; aspect-ratio: 5 / 4; overflow: hidden; overflow: clip; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; margin-bottom: .75rem; border-radius: calc(var(--radius) - 6px); background: var(--warm); }
.steps__chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: .8125rem; font-weight: 600; letter-spacing: -0.01em; }
.steps__dot { width: .5rem; height: .5rem; border-radius: 999px; background: #34C759; }
/* Mobilen är densamma som i publicera-demon, här stående i kortet och avskuren i nederkant. */
.steps__phone.phone { display: block; position: absolute; left: 28%; top: 5%; width: 44%; }
.steps__phone .phone__frame { box-shadow: 0 20px 40px rgba(0, 0, 0, .18), inset 0 0 0 calc(var(--u) * 2) #2A2A2C; }
.app__create:disabled { pointer-events: none; cursor: default; }
/* Tv:n: skärmen är 1280 × 720 enheter (--t), så vyn skalar med tv:ns bredd. Ramen är behållaren, eftersom
   skärmens egna mått (padding) annars räknas mot en yttre behållare. 100cqw är ramens innehållsbredd, alltså skärmens. */
.tv { width: 90%; display: flex; flex-direction: column; align-items: center; }
.tv__frame { width: 100%; box-sizing: border-box; aspect-ratio: 1.7346; padding: 1.6%; container-type: inline-size; border-radius: 6px; background: #0B0B0C; box-shadow: 0 18px 36px rgba(0, 0, 0, .2); }
.tv__screen { height: 100%; overflow: hidden; border-radius: 2px; --t: calc(100cqw / 1280); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tv__stand { width: 26%; height: 0; border-bottom: 6px solid #0B0B0C; border-left: 10px solid transparent; border-right: 10px solid transparent; }
/* Registreringsvyn på signage.digmi.eu (css/style.css, #content-reg): mått i px vid 1280 × 720. */
.tv__screen--reg { gap: calc(var(--t) * 11); background: #25262B; color: #FFF; }
.tv__logo { width: calc(var(--t) * 86); height: auto; }
.tv__title { font-size: calc(var(--t) * 72); font-weight: 700; line-height: .85; letter-spacing: -0.03em; -webkit-text-stroke: calc(var(--t) * 1.5) #FFF; }
.tv__title em { display: block; margin-top: -0.15em; font-family: var(--serif); font-size: 1.15em; font-style: normal; font-weight: 400; color: #D295E4; -webkit-text-stroke: 0; }
.tv__sub { max-width: calc(var(--t) * 448); font-family: var(--serif); font-style: italic; font-size: calc(var(--t) * 18.4); line-height: 1.6; color: rgba(255, 255, 255, .8); }
.tv__qr { position: relative; display: grid; place-items: center; padding: calc(var(--t) * 24) calc(var(--t) * 28); background: linear-gradient(#D295E4, #D295E4) 0 0 / calc(var(--t) * 40) calc(var(--t) * 3), linear-gradient(#D295E4, #D295E4) 0 0 / calc(var(--t) * 3) calc(var(--t) * 40), linear-gradient(#D295E4, #D295E4) 100% 0 / calc(var(--t) * 40) calc(var(--t) * 3), linear-gradient(#D295E4, #D295E4) 100% 0 / calc(var(--t) * 3) calc(var(--t) * 40), linear-gradient(#D295E4, #D295E4) 0 100% / calc(var(--t) * 40) calc(var(--t) * 3), linear-gradient(#D295E4, #D295E4) 0 100% / calc(var(--t) * 3) calc(var(--t) * 40), linear-gradient(#D295E4, #D295E4) 100% 100% / calc(var(--t) * 40) calc(var(--t) * 3), linear-gradient(#D295E4, #D295E4) 100% 100% / calc(var(--t) * 3) calc(var(--t) * 40); background-repeat: no-repeat; }
.tv__qr img { display: block; width: calc(var(--t) * 240); height: auto; padding: calc(var(--t) * 12); border-radius: calc(var(--t) * 14); background: #FFF; }
.tv__qr i { position: absolute; font-style: normal; font-size: calc(var(--t) * 13.6); font-weight: 700; line-height: 1; letter-spacing: .25em; color: #D295E4; white-space: nowrap; }
.tv__qr i:nth-child(1) { top: calc(var(--t) * -8); left: 50%; transform: translateX(-50%); }
.tv__qr i:nth-child(2) { bottom: calc(var(--t) * -8); left: 50%; transform: translateX(-50%); }
.tv__qr i:nth-child(3) { left: calc(var(--t) * -8); top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.tv__qr i:nth-child(4) { right: calc(var(--t) * -8); top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); }
/* Kampanjen som mobilen skapar, liggande på tv:n. */
.tv__screen--campaign { justify-content: space-between; align-items: flex-start; box-sizing: border-box; padding: calc(var(--t) * 80) calc(var(--t) * 96); background: var(--s-bg); color: var(--s-fg); text-align: left; }
.tv__k, .tv__f { font-size: calc(var(--t) * 34); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.tv__t { font-size: calc(var(--t) * 150); line-height: .95; }
/* En kolumn på surfplatta: bilden blir lägre, annars tar tre bilder över hela sidan. */
@media (min-width: 600px) and (max-width: 960px) { .steps__art { aspect-ratio: 2 / 1; } .tv { width: 58%; } .steps__phone.phone { left: 36%; width: 28%; } }
/* Utan container-enheter går vyerna inte att skala: då visas stegen som text. */
@supports not (width: 1cqw) { .steps__art { display: none; } }

/* Produkterna */
.section.products { display: flex; flex-direction: column; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.products__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Tre kort får inte plats under ~1100 px: en kolumn i stället för smala kort med brutna namn. */
@media (max-width: 1100px) { .products__grid { grid-template-columns: minmax(0, 1fr); } }
.product-card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(2rem, 3.5vw, 3rem); border-radius: var(--radius); }
.product-card--marketing { background: var(--ink); color: #FFF; }
.product-card--signage { background: #E9DCCB; color: var(--ink); }
.product-card--signage .eyebrow, .product-card--signage .product-card__text { color: #4A4038; }
.product-card--signage .product-card__examples li { border-color: rgba(17, 17, 17, .18); }
.product-card--marketplace { background: var(--paper); border: 1px solid var(--line); }
.product-card--marketing .eyebrow, .product-card--marketing .product-card__text { color: rgba(255, 255, 255, .78); }
/* Bilden överst i kortet: appen i en mobil, Digmi Box som foto, Marketplace på en platta. */
.product-card__media { display: flex; align-items: flex-end; justify-content: center; height: 260px; margin: 0 0 .5rem; overflow: hidden; }
.product-card__media picture { display: contents; }
.product-card__media img { display: block; }
.product-card__media--phone img, .product-card__media--tablet img { height: 100%; width: auto; border: 7px solid #0B0B0C; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
.product-card__media--phone img { border-radius: 26px; }
.product-card__media--tablet img { border-width: 9px; border-radius: 16px; }
.product-card__media--photo { border-radius: calc(var(--radius) - 4px); }
.product-card__media--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.product-card__name { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; font-weight: 600; letter-spacing: -0.035em; }
.product-card__text { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; color: var(--graphite); }
.product-card__examples { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.product-card__examples li { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; }
.product-card--marketing .product-card__examples li { border-color: rgba(255, 255, 255, .28); }
.product-card__link { margin-top: auto; padding-top: .75rem; }
.products__together { margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 2.2vw, 1.875rem); color: #6B5A48; text-wrap: balance; }

.industry-grid { scroll-margin-top: 2rem; display: grid; gap: 20px; padding: 0 var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; box-sizing: border-box; }
.industry-grid__row { display: flex; gap: 20px; height: clamp(420px, 36vw, 520px); }
.tile { position: relative; display: block; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius); color: #FFF; text-decoration: none; isolation: isolate; }
.tile__media { position: absolute; inset: 0; }
.tile:hover .ls__stage, .tile:focus-visible .ls__stage { transform: scale(1.04); }
.tile__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10, 8, 6, .78) 0%, rgba(10, 8, 6, .3) 38%, rgba(10, 8, 6, 0) 62%), linear-gradient(to top, rgba(10, 8, 6, .7), rgba(10, 8, 6, 0) 45%); }
.tile__playing { position: absolute; left: 2rem; top: 1.75rem; display: flex; align-items: center; gap: .5rem; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.tile__body { position: absolute; left: 2rem; bottom: 2rem; width: min(13rem, 38%); display: flex; flex-direction: column; gap: .75rem; }
.tile__title { font-size: clamp(1.25rem, 1.6vw, 1.875rem); line-height: 1.02; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
.tile__lead { font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.tile__cta { display: flex; align-items: center; gap: .9rem; margin-top: .75rem; }
.round-arrow { display: grid; place-items: center; width: 54px; height: 54px; border: 1.5px solid #FFF; border-radius: 999px; transition: background .3s, color .3s; }
.tile:hover .round-arrow, .tile:focus-visible .round-arrow { background: #FFF; color: var(--ink); }
.tile__explore { font-weight: 600; opacity: 0; transform: translateX(-10px); transition: opacity .5s, transform .5s var(--ease); }
.tile:hover .tile__explore, .tile:focus-visible .tile__explore { opacity: 1; transform: none; }

.more-industries { display: flex; align-items: center; flex-wrap: wrap; gap: .875rem; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 3rem auto 0 !important; padding: 0 var(--gutter); }
.more-industries ul { display: flex; flex-wrap: wrap; gap: .875rem; margin: 0 0 0 .75rem; padding: 0; list-style: none; }
.more-industries__cta { margin-left: auto; }
.suppliers__cta { align-self: flex-start; }

.audience-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: calc(var(--max) + 2 * var(--gutter)); margin: clamp(4.5rem, 8vw, 7rem) auto 0 !important; padding: 0 var(--gutter); }
.audience-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; min-height: 340px; padding: clamp(2rem, 3.5vw, 3rem); border-radius: var(--radius); text-decoration: none; color: inherit; }
.audience-card__text { display: flex; flex-direction: column; gap: .9rem; max-width: 28rem; }
.audience-card__title { font-size: clamp(1.875rem, 2.8vw, 2.5rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.audience-card--dark { background: var(--ink); color: #FFF; }
.audience-card--dark .eyebrow { color: rgba(255, 255, 255, .72); }
.audience-card--blueprint { background-color: var(--sand); background-image: repeating-linear-gradient(0deg, rgba(17, 17, 17, .05) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(17, 17, 17, .05) 0 1px, transparent 1px 32px); }
.audience-card__link { font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.blueprint { position: absolute; right: 2.75rem; bottom: 2.25rem; color: var(--ink); }
/* Teckningen får bara plats bredvid texten i breda kort; annars göms den och kortet behöver ingen extra höjd. */
@media (min-width: 1181px) { .audience-card--blueprint { min-height: 420px; } }
@media (max-width: 1180px) { .audience-card--blueprint .blueprint { display: none; } .flow { flex-wrap: wrap; row-gap: .5rem; } }
.blueprint__screen { fill: #6B5A48; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.flow { display: flex; align-items: center; }
.flow__node { flex: none; padding: .6rem 1rem; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.flow__node--hl { background: #FFF; color: var(--ink); border-color: #FFF; }
.flow__line { position: relative; flex: 1; height: 1px; margin: 0 .6rem; background: rgba(255, 255, 255, .25); }
.flow__dot { position: absolute; top: -3px; width: 7px; height: 7px; margin-left: -3px; border-radius: 999px; background: #F2D3A0; box-shadow: 0 0 12px #F2D3A0; animation: flow 2.4s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes flow { from { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: 100%; opacity: 0; } }

/* ==========================================================================
   Branschsidor
   ========================================================================== */
.section { padding: var(--section) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto !important; box-sizing: border-box; }
.section--paper { background: var(--paper); max-width: none; }
.section--ink { background: #0F0E0D; color: #FFF; max-width: none; }
/* Produktsidornas innehållsyta har sidmarginal: fullbreddssektioner med bakgrund ska ändå nå kanterna (WordPress negativa marginaler). */
.site-main > .has-global-padding > .section--paper.alignfull, .site-main > .has-global-padding > .section--ink.alignfull { margin-inline: calc(var(--wp--style--root--padding-left) * -1) calc(var(--wp--style--root--padding-right) * -1) !important; }
.section--ink .eyebrow, .section--ink .lead-muted { color: rgba(255, 255, 255, .78); }
.spot { position: absolute; width: 560px; height: 560px; border-radius: 999px; background: var(--v-glow, rgba(214, 170, 110, .35)); filter: blur(80px); pointer-events: none; animation: spot 6s ease-in-out infinite; }
.spot--center { left: 50%; top: 50%; margin: -260px 0 0 -260px; width: 520px; height: 520px; background: color-mix(in srgb, var(--ls-glow, #B89B72) 55%, transparent); }
.spot--corner { right: -120px; top: -160px; width: 520px; height: 520px; }
@keyframes spot { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }

/* Hero */
.ihero { position: relative; overflow: hidden; min-height: min(880px, 100svh); background: var(--v-bg); color: #FFF; --mx: 0; --my: 0; --ls-tx: calc(var(--mx) * -22px); --ls-ty: calc(var(--my) * -14px); }
.ihero__media { position: absolute; top: 0; bottom: 0; right: 0; width: min(62.5%, 900px); }
.ihero__screen { position: absolute; inset: 0; }
/* Skärmen och "Exempel"-kortet delar förflyttningen; skalan läses av JS när hörnet publiceras. */
/* --ls-top i px: sidhuvudets höjd plus parallaxens största förflyttning uppåt (14px). */
.ihero__screen { --ls-scale: 1.04; --ls-top: 118px; }
.ihero__screen .ls__stage { transform: translate(var(--ls-tx), var(--ls-ty)) scale(var(--ls-scale)); transition: transform .9s var(--ease); }
.ihero__fade { position: absolute; inset: 0 auto 0 0; width: 45%; background: linear-gradient(90deg, var(--v-bg), transparent); pointer-events: none; }
.ihero__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 200px; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent); pointer-events: none; }
.now-playing { position: absolute; z-index: 2; left: min(calc(var(--ls-x, 80%) - 186px), calc(100% - 238px)); top: min(calc(var(--ls-b, 80%) - 70px), calc(100% - 150px)); width: 222px; box-sizing: border-box; display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem; border-radius: 14px; background: rgba(20, 16, 12, .42); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translate(var(--ls-tx), var(--ls-ty)); transition: transform .9s var(--ease); }
.now-playing__label { display: flex; align-items: center; gap: .5rem; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.now-playing__title { font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.now-playing__dots { display: flex; gap: 6px; }
.now-playing__dots span { width: 10px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .35); transition: width .6s var(--ease), background .3s; }
.now-playing__dots span.is-on { width: 34px; background: #FFF; }
.ihero__content { position: relative; z-index: 3; box-sizing: border-box; max-width: calc(600px + var(--gutter)); padding: clamp(8.5rem, 14vw, 12rem) 0 5rem var(--gutter); display: flex; flex-direction: column; gap: 1.5rem; }
.ihero .eyebrow { color: rgba(255, 255, 255, .88); margin-top: .75rem; }
.ihero__title { margin: 0; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .96; font-weight: 600; letter-spacing: -0.035em; }
.ihero__title .reveal { display: inline-block; animation: reveal 1.1s var(--ease) var(--d, 0s) both; }
.ihero__accent { display: block !important; margin-top: .05em; font-size: 1.09em; color: var(--v-accent); }
@keyframes reveal { from { opacity: 0; transform: translateY(45%); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
.ihero__sub { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; }
.ihero__body { margin: 0; max-width: 31rem; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.ihero__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: .75rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .25rem; font-size: .8125rem; color: var(--graphite); }
.crumbs a { color: inherit; }
.crumbs--light { color: rgba(255, 255, 255, .75); }

/* Publicera-demo */
.publish { display: flex; flex-direction: column; gap: 3.5rem; }
.publish__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; flex-wrap: wrap; }
.publish__intro { display: flex; flex-direction: column; gap: 1.4rem; max-width: 40rem; }
.publish__controls { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }
.publish__buttons { display: flex; align-items: center; gap: .5rem; }
.btn--publish { min-height: 56px; padding: 1.2rem 1.9rem; font-size: 1.0625rem; }
.publish.is-done .btn--publish { background: #2F7A4C; border-color: #2F7A4C; }
.publish__count { margin: 0; font-size: .875rem; color: var(--graphite); font-variant-numeric: tabular-nums; }
/* Scenen är 1280 × 640 enheter: mobilen 280 × 588 till vänster, tre kort om 262 × 388 och strålarna under dem. */
.publish__stage { position: relative; aspect-ratio: 1280 / 640; }
.publish__beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.beam-track { stroke: #D9D2C6; stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.beam { stroke: var(--v-beam); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s cubic-bezier(.6, 0, .2, 1); vector-effect: non-scaling-stroke; }
.beam.is-on { stroke-dashoffset: 0; }
/* Mobilen: iPhone 393 × 852 pt (Dynamic Island) plus 12 pt ram. --u är en punkt i appen, så allt skalar med mobilens bredd. */
.phone { position: absolute; left: 0; top: 4.06%; width: 21.875%; aspect-ratio: 417 / 876; container-type: inline-size; --u: calc(100cqw / 417); }
.phone__frame { height: 100%; box-sizing: border-box; padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 62); background: #000; box-shadow: 0 40px 80px rgba(0, 0, 0, .22), inset 0 0 0 calc(var(--u) * 2) #2A2A2C; }
/* iOS-appens vy New Campaign i ljust läge på iOS 26 (layouten efter Connys skärmdumpar 2026-10-12, CreateCampaignView.swift).
   Färger ur Assets.xcassets, ljust tema: Brand #C293D0, BackgroundPrimary #FFF, BackgroundSecondary #FAFAF9,
   LabelSecondary rgba(60,60,67,.6), SeparatorsNonOpaque rgba(84,84,86,.34), GrayButton #3D3D3D.
   Utanför katalogen: --app-fill (iOS tertiära fyllnad), bildernas ram (Color.gray, #8E8E93), glasknapparnas ton och
   avstängt reglage (iOS sekundära fyllnad). Radhöjderna är San Franciscos: 17/22, 16/21, 20/25, 14/19. */
.app { --app-brand: #C293D0; --app-bg: #FAFAF9; --app-label2: rgba(60, 60, 67, .6); --app-sep: rgba(84, 84, 86, .34); --app-fill: rgba(118, 118, 128, .12); --app-hair: max(.5px, calc(var(--u) * 0.5)); position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; border-radius: calc(var(--u) * 50); background: var(--app-bg); color: #000; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 22); }
/* En halv pixel försvinner på vanliga skärmar (1x): där är hårlinjen en hel pixel. */
@media (max-resolution: 1.99dppx) { .app { --app-hair: 1px; } }
.app svg { display: block; }
.app__sys svg, .app__menu svg { height: 100%; width: auto; }
/* Statusrad 46 pt och navigationsfält 54 pt (knapparnas mitt 68 pt från toppen) på BackgroundPrimary, med hårlinje under. */
.app__top { flex: none; position: relative; z-index: 1; background: #FFF; box-shadow: 0 var(--app-hair) 0 var(--app-sep); }
.app__status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(var(--u) * 46); padding: calc(var(--u) * 4) calc(var(--u) * 30) 0; box-sizing: border-box; font-size: calc(var(--u) * 16); font-weight: 600; }
.app__time { padding-left: calc(var(--u) * 16); }
.app__island { width: calc(var(--u) * 120); height: calc(var(--u) * 35); border-radius: 999px; background: #000; }
.app__sys { justify-self: end; display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 12); }
.app__nav { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 54); box-sizing: border-box; padding: 0 calc(var(--u) * 16) calc(var(--u) * 10); }
.app__title { flex: 1; min-width: 0; font-size: calc(var(--u) * 17); font-weight: 600; white-space: nowrap; }
/* Liquid Glass: tillbakaknappen är en cirkel, knappen till höger ligger i en kapsel. Lätt grå ton, så att de syns mot det vita fältet. */
.app__glass { flex: none; display: grid; place-items: center; height: calc(var(--u) * 44); border-radius: 999px; background: rgba(118, 118, 128, .1); box-shadow: inset 0 0 0 var(--app-hair) rgba(0, 0, 0, .08), 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(0, 0, 0, .1); }
.app__glass--back { width: calc(var(--u) * 44); }
.app__glass--back svg { width: calc(var(--u) * 10); height: calc(var(--u) * 17); margin-right: calc(var(--u) * 2); }
.app__glass--action { padding: 0 calc(var(--u) * 12); }
.app__create { position: relative; flex: none; box-sizing: border-box; display: inline-grid; justify-items: center; padding: calc(var(--u) * 8); border: 0; border-radius: calc(var(--u) * 11); background: var(--app-brand); color: #FFF; font-family: inherit; font-size: calc(var(--u) * 14); font-weight: 600; line-height: calc(var(--u) * 17); text-align: center; cursor: pointer; transition: transform .2s var(--ease), background .25s; }
/* Knappen behåller bredden för "Create Campaign" även när texten byts efter publicering – annars hoppar titeln. */
.app__create > span, .app__create::after { grid-area: 1 / 1; }
.app__create::after { content: "Create Campaign"; visibility: hidden; }
/* Knappen är liten i demon: träffytan är större än det som syns. */
.app__create::before { content: ""; position: absolute; inset: calc(var(--u) * -14) calc(var(--u) * -12); }
.app__create:hover { transform: scale(1.06); }
.app__create:active { transform: scale(.96); }
.publish.is-done .app__create { background: #34C759; cursor: default; transform: none; }
.publish.is-busy .app__create { cursor: progress; transform: none; }
/* ScrollView > LazyVStack(spacing: 16) med 16 pt sidmarginal. Innehållet är högre än skärmen som i appen. Det rullas
   inte (en rullbar yta fångar sidans hjulrullning): medan demon publicerar flyttas innehållet upp så att nederkanten
   – Locations och Show on devices – syns. 752 pt = skärmen 852 minus statusrad 46 och navigationsfält 54. */
.app__body { flex: 1; min-height: 0; overflow: hidden; overflow: clip; }
.app__scroll { display: flex; flex-direction: column; gap: calc(var(--u) * 16); padding: calc(var(--u) * 24) calc(var(--u) * 16) calc(var(--u) * 54); transition: transform .7s var(--ease-in-out); }
.publish.is-busy .app__scroll, .publish.is-done .app__scroll { transform: translateY(min(0px, calc(var(--u) * 752 - 100%))); }
.app__scroll > * { flex: none; }
.app__label { font-size: calc(var(--u) * 16); font-weight: 500; line-height: calc(var(--u) * 21); }
.app__label--tight { margin-top: calc(var(--u) * 8); margin-bottom: calc(var(--u) * -8); }
.app__label--locations { margin-top: calc(var(--u) * 20); margin-bottom: calc(var(--u) * -10); }
.app__heading { margin-top: calc(var(--u) * 28); font-size: calc(var(--u) * 20); font-weight: 500; line-height: calc(var(--u) * 25); }
.app__input { margin-bottom: calc(var(--u) * 12); padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 12); box-shadow: inset 0 0 0 var(--app-hair) var(--app-sep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__group { display: flex; flex-direction: column; margin-bottom: calc(var(--u) * 12); border-radius: calc(var(--u) * 10); box-shadow: inset 0 0 0 var(--app-hair) var(--app-sep); }
.app__row, .app__stepper-row { display: flex; justify-content: space-between; align-items: center; color: var(--app-label2); }
.app__row { height: calc(var(--u) * 44.5); box-sizing: border-box; padding: 0 calc(var(--u) * 16); }
.app__row + .app__row { border-top: var(--app-hair) solid var(--app-sep); }
.app__menu { display: flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 16); padding-right: calc(var(--u) * 13); color: var(--app-brand); }
/* Datum och tid är kapslar som i iOS datumväljare. */
.app__dates { display: flex; gap: calc(var(--u) * 13); }
.app__chip { padding: calc(var(--u) * 6.25) calc(var(--u) * 12); border-radius: 999px; background: var(--app-fill); color: #000; white-space: nowrap; }
/* LazyVGrid med tre flexibla kolumner; varje bild har kryss i hörnet och visningstid under. */
.app__media { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--u) * 8); }
.app__cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); }
.app__thumb, .app__add { position: relative; width: calc(var(--u) * 110); height: calc(var(--u) * 148); box-sizing: border-box; border-radius: calc(var(--u) * 8); box-shadow: inset 0 0 0 var(--app-hair) #8E8E93; }
.app__thumb { overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 40); background: var(--s-bg); color: var(--s-fg); }
/* Kickern delar rad med flyttknappen: en rad, med ellips om den är för lång. */
.app__thumb-k { max-width: calc(var(--u) * 58); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--u) * 5.5); font-weight: 500; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.app__thumb-t { font-size: calc(var(--u) * 19); line-height: .98; overflow-wrap: anywhere; }
/* Bildens knappar: flytta uppe till höger, spara och dela nedtill. */
.app__badge { position: absolute; display: grid; place-items: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 999px; background: rgba(60, 60, 67, .78); color: #FFF; }
.app__badge svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.app__badge--move { top: calc(var(--u) * 8); right: calc(var(--u) * 12); }
.app__badge--save { left: calc(var(--u) * 10); bottom: calc(var(--u) * 10); background: rgba(142, 142, 147, .85); }
.app__badge--share { right: calc(var(--u) * 10); bottom: calc(var(--u) * 10); color: #F77737; }
/* xmark.circle.fill i GrayButton, förskjuten 8 pt ut över bildens övre högra hörn. */
.app__remove { position: absolute; top: calc(var(--u) * -8); right: calc(50% - calc(var(--u) * 55) - calc(var(--u) * 8)); width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 999px; background: #3D3D3D; }
.app__remove::before, .app__remove::after, .app__add::before, .app__add::after, .app__stepper i::before, .app__stepper i:last-child::after, .app__sq::before, .app__sq--plus::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 999px; transform: translate(-50%, -50%); }
.app__remove::before, .app__remove::after { width: calc(var(--u) * 11); height: calc(var(--u) * 1.8); background: #FFF; transform: translate(-50%, -50%) rotate(45deg); }
.app__remove::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* DurationControlView: minus.square.fill, "15s" på systemGray4 30 % och plus.square.fill i Brand. */
.app__duration { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 14); font-weight: 500; line-height: calc(var(--u) * 19); }
.app__duration > span { min-width: calc(var(--u) * 32); padding: calc(var(--u) * 4) calc(var(--u) * 6); border-radius: calc(var(--u) * 6); background: rgba(209, 209, 214, .3); text-align: center; }
.app__sq { position: relative; width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 4); background: var(--app-brand); }
.app__sq::before { width: calc(var(--u) * 10); height: calc(var(--u) * 1.8); background: var(--app-bg); }
.app__sq--plus::after { width: calc(var(--u) * 1.8); height: calc(var(--u) * 10); background: var(--app-bg); }
/* plus.circle.fill i grått. */
.app__add::before { width: calc(var(--u) * 26); height: calc(var(--u) * 26); background: #8E8E93; }
.app__add::after { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 0; background: linear-gradient(var(--app-bg), var(--app-bg)) center / 100% calc(var(--u) * 2) no-repeat, linear-gradient(var(--app-bg), var(--app-bg)) center / calc(var(--u) * 2) 100% no-repeat; }
/* Stepper på iOS 26: en kapsel. */
.app__stepper { display: flex; width: calc(var(--u) * 94); height: calc(var(--u) * 31); border-radius: 999px; background: var(--app-fill); }
.app__stepper i { position: relative; flex: 1; }
.app__stepper i + i { box-shadow: calc(var(--app-hair) * -1) 0 0 rgba(60, 60, 67, .3); }
.app__stepper i::before { width: calc(var(--u) * 14); height: calc(var(--u) * 1.8); background: #000; }
.app__stepper i:last-child::after { width: calc(var(--u) * 1.8); height: calc(var(--u) * 14); background: #000; }
.app__toggle { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * -10); font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 19); }
.app__place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Toggle på iOS 26: bred kapsel 64 × 28 pt med avlång knopp, tonad i Brand. */
.app__switch { flex: none; position: relative; width: calc(var(--u) * 64); height: calc(var(--u) * 28); border-radius: 999px; background: var(--app-brand); }
.app__switch::after { content: ""; position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); width: calc(var(--u) * 39); height: calc(var(--u) * 24); border-radius: 999px; background: #FFF; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, .25); }
.app__switch--off { background: rgba(120, 120, 128, .16); }
.app__switch--off::after { right: auto; left: calc(var(--u) * 2); }
/* Show on devices: rubriken till vänster, en andra Create Campaign till höger. */
/* 20 pt under Locations + radavståndet 16 + 28 pt ovanför rubriken = 64 pt från sista reglaget. */
.app__devices { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--u) * 58); }
.app__heading--inline { margin-top: 0; }
.app__home { position: absolute; left: 50%; bottom: calc(var(--u) * 8); width: calc(var(--u) * 134); height: calc(var(--u) * 5); border-radius: 999px; background: #000; transform: translateX(-50%); pointer-events: none; }
.pcard { position: absolute; top: 9.4%; width: 20.47%; aspect-ratio: 290 / 430; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .12); transition: box-shadow .4s ease; }
/* Utan container-enheter går mobilen inte att skala: då visas de tre korten i en rad utan mobil och strålar. */
@supports not (width: 1cqw) {
	.phone, .publish__beams { display: none; }
	.publish__stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.pcard { position: relative; top: 0; left: auto !important; width: auto; }
}
.pcard.is-live { box-shadow: 0 0 0 2px var(--ink), 0 30px 60px rgba(0, 0, 0, .18); }
.pcard__media { position: absolute; inset: 0; }
/* Platsnamn och status delar rad när de ryms; annars hamnar statusen på egen rad – aldrig utanför kortet. */
.pcard__bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .2rem .35rem; padding: .75rem .7rem; border-radius: 10px; font-size: .8125rem; font-weight: 600; }
.pcard__bar > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Statusen har bredden av den längsta texten (Uppdaterad), så att raden inte bryts om mitt i publiceringen,
   och står högerställd även när den hamnar på egen rad. */
.pcard__status { flex: none; min-width: 6.7em; margin-left: auto; display: flex; justify-content: flex-end; align-items: center; gap: .45rem; font-weight: 500; color: rgba(255, 255, 255, .85); }
.pcard__dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .45); transition: background .3s; }
.pcard.is-live .pcard__dot { background: var(--live-soft); }

/* Schema */
.schedule { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
.schedule__media { grid-column: span 7; position: relative; height: clamp(380px, 40vw, 560px); border-radius: var(--radius); overflow: hidden; }
.schedule__screen { position: absolute; inset: 0; }
.schedule__badge { position: absolute; left: 20px; top: 20px; padding: .6rem 1rem; border-radius: 999px; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.schedule__text { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 1.4rem; }
.timeline { position: relative; display: flex; flex-direction: column; margin-top: .5rem; --slot: 0; --slots: 3; }
.timeline__rail { position: absolute; left: 7px; top: 22px; bottom: 22px; width: 2px; background: var(--line); }
.timeline__fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--slot) / var(--slots) * 100%); background: var(--ink); transition: height .6s var(--ease); }
.timeline__slot { position: relative; display: flex; align-items: center; gap: 1.4rem; min-height: 44px; padding: .8rem 0; border: 0; background: transparent; font: inherit; color: var(--stone-text); text-align: left; cursor: pointer; }
.timeline__slot[aria-selected="true"] { color: var(--ink); }
.timeline__dot { width: 16px; height: 16px; box-sizing: border-box; border-radius: 999px; border: 2px solid #D9D2C6; background: var(--paper); transition: all .3s ease; }
.timeline__slot.is-past .timeline__dot { border-color: var(--ink); }
.timeline__slot[aria-selected="true"] .timeline__dot { border-color: var(--ink); background: var(--ink); transform: scale(1.15); }
.timeline__time { width: 3.5rem; font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.timeline__label { font-size: 1.125rem; font-weight: 600; }

/* Surfplatta */
.tablet { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 5rem); align-items: center; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); }
.tablet .spot { left: 8%; top: 5%; }
.tablet__device { position: relative; height: 430px; box-sizing: border-box; padding: 16px; border-radius: 30px; background: #1D1D1D; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 90px rgba(0, 0, 0, .6); }
.tablet__screen { position: relative; height: 100%; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.5rem; border-radius: 16px; background: var(--paper); color: var(--ink); }
.tablet__top { display: flex; justify-content: space-between; align-items: center; }
.tablet__cart { padding: .5rem .9rem; border-radius: 999px; background: var(--ink); color: #FFF; font-size: .8125rem; font-weight: 600; transition: transform .3s var(--ease); }
.tablet__device.is-bumped .tablet__cart { transform: scale(1.12); }
.tablet__grid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.product { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; border-radius: 12px; background: #F1ECE4; }
.product__shape { flex: 1; min-height: 60px; align-self: center; width: 50px; max-height: 116px; border-radius: 22px 22px 8px 8px; background: var(--c); box-shadow: inset -10px 0 0 rgba(0, 0, 0, .12); margin-top: auto; }
.product__name { font-size: .8125rem; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.product__price { font-size: .8125rem; color: var(--graphite); }
.toast { position: absolute; left: 50%; bottom: 1.25rem; transform: translate(-50%, 14px); padding: .75rem 1.5rem; border-radius: 999px; background: var(--ink); color: #FFF; font-size: .8125rem; font-weight: 600; opacity: 0; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tablet__text { position: relative; display: flex; flex-direction: column; gap: 1.4rem; max-width: 30rem; }

/* Inte en TV */
.notatv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.notatv__text { display: flex; flex-direction: column; gap: 1.4rem; max-width: 33rem; }
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numbered li { counter-increment: n; display: flex; gap: 1.5rem; padding: .95rem 0; border-top: 1px solid var(--line); font-size: 1.0625rem; }
.numbered li::before { content: counter(n, decimal-leading-zero); width: 1.75rem; color: var(--stone-text); font-variant-numeric: tabular-nums; }
.notatv [data-rotate] { align-self: flex-start; background: transparent; border-color: var(--ink); font-weight: 600; }
.notatv__stage { position: relative; height: 600px; border-radius: var(--radius); overflow: hidden; background: #16130F; display: grid; place-items: center; }
.device { position: relative; width: 300px; height: 530px; box-sizing: border-box; padding: 8px; border-radius: 6px; background: #050505; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 100px rgba(0, 0, 0, .6); transition: width .9s var(--ease), height .9s var(--ease); }
.device.is-landscape { width: min(540px, 90%); height: 310px; }
.device__screen { width: 100%; height: 100%; }

/* Kundcitat */
.case-quote { position: relative; overflow: hidden; margin: 0 auto !important; max-width: var(--max); min-height: 520px; border-radius: var(--radius); background: #1A1714; color: #FFF; box-sizing: border-box; }
.case-quote__bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(6px) brightness(.45) saturate(.9); }
.case-quote__inner { position: relative; min-height: 520px; box-sizing: border-box; padding: clamp(2.5rem, 6vw, 5.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.case-quote .eyebrow { color: rgba(255, 255, 255, .78); }
.case-quote__text { margin: 0; }
.case-quote__text p { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.1; max-width: 62rem; }
.case-quote__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: rgba(255, 255, 255, .85); }
.editor-note { max-width: var(--max); margin: 2rem auto; padding: 1rem 1.25rem; border: 1px dashed var(--stone); border-radius: 8px; color: var(--graphite); font-size: .875rem; }

/* Rullande samarbeten */
.marquee { display: flex; overflow: hidden; padding: 4.5rem 0; border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__list { flex: none; display: flex; gap: 4.5rem; margin: 0; padding: 0 2.25rem; list-style: none; animation: marquee var(--marquee-duration, 38s) linear infinite; }
.marquee__list li { display: flex; align-items: center; }
.marquee__list img { display: block; width: auto; height: 40px; max-width: 200px; object-fit: contain; }
.marquee:hover .marquee__list { animation-play-state: paused; }
/* Tangentbord: snurran står still i startläget så att den fokuserade loggan alltid är i bild. */
.marquee:has(:focus-visible) .marquee__list { animation: none; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Nyheter */
.news-rail { display: flex; flex-direction: column; gap: 2.75rem; }
.news-rail__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.news-rail__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.news-card { display: flex; flex-direction: column; gap: 1rem; color: var(--ink); text-decoration: none; }
.news-card__media { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: #1A1714; }
.news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.news-card:hover .news-card__media img, .news-card .wp-block-post-featured-image a:hover img { transform: scale(1.04); }
.news-card__meta, .news-card__meta * { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); }
.news-card__title, .news-card__title a { font-size: 1.375rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.news-card:hover .news-card__title, .news-card__title a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* FAQ */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 5rem); padding-top: 0 !important; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font-size: 1.25rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1.5px solid #D9D2C6; border-radius: 999px; font-size: 1.25rem; font-weight: 400; transition: transform .3s var(--ease); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p { margin: 0 0 1.5rem; max-width: 35rem; font-size: 1.0625rem; line-height: 1.6; color: var(--graphite); }

/* CTA */
/* Demo-kortet direkt efter en mörk helbreddssektion: luft emellan, annars smälter de ihop. */
.try-app + .cta, .tablet + .cta { margin-top: clamp(3rem, 6vw, 5rem) !important; }
.cta { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 2.5rem; flex-wrap: wrap; max-width: var(--max); margin: 0 auto !important; box-sizing: border-box; padding: clamp(2.5rem, 6vw, 6rem); border-radius: var(--radius); background: var(--ink); color: #FFF; }
.cta .eyebrow { color: rgba(255, 255, 255, .75); }
.cta__text { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.cta__text p:last-child { margin: 0; color: rgba(255, 255, 255, .8); font-size: 1.125rem; }
.cta__accent { color: var(--v-accent, #E2C79E); }
.cta__actions { position: relative; display: flex; gap: .875rem; flex-wrap: wrap; }
* + .cta, .news-rail + .cta { margin-bottom: var(--section) !important; }

/* Leadformulär */
.lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.lead__intro { display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: 2rem; }
.lead__promises { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.lead__promises li { display: flex; gap: .75rem; align-items: center; }
.lead__promises li::before { content: ""; width: 18px; height: 18px; border-radius: 999px; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M5 10.5l3 3 7-7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lead__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); background: #FFF; box-shadow: 0 30px 70px rgba(40, 30, 20, .08); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full, .lead__submit, .lead__legal { grid-column: 1 / -1; }
.field label { font-size: .875rem; font-weight: 600; }
.field__opt { font-weight: 400; color: var(--graphite); }
.field input, .field select, .field textarea { box-sizing: border-box; width: 100%; min-height: 48px; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); font: 1rem var(--sans); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field__error { min-height: 1em; font-size: .8125rem; color: #B3261E; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead__submit { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.lead__status { margin: 0; font-size: .9375rem; color: var(--graphite); }
.lead__form.is-sent .lead__status { color: #2F7A4C; font-weight: 600; }
.lead__legal { margin: 0; font-size: .8125rem; color: var(--graphite); }

/* ==========================================================================
   Sidfot
   ========================================================================== */
.site-footer { margin-top: 0; padding: 4.5rem var(--gutter) 2.5rem; border-top: 1px solid var(--line); background: var(--warm); }
.site-footer__top { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; max-width: var(--max); margin: 0 auto; }
.site-footer__brand { display: flex; flex-direction: column; gap: .9rem; }
.site-footer__claim { margin: .5rem 0 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.site-footer__social { margin-top: .75rem; }

/* Sociala medier */
.social { display: flex; flex-direction: column; gap: .9rem; }
.social__list { display: flex; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.social__link { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid #D9D2C6; border-radius: 999px; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.social__link:hover, .social__link:focus-visible { background: var(--ink); border-color: var(--ink); color: #FFF; }
.social--section { align-items: center; gap: 1.25rem; text-align: center; }
.social__list--lg .social__link { width: 56px; height: 56px; }
.social__list--lg svg { width: 24px; height: 24px; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.site-footer__nav ul, .site-footer__legal { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .25em; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; max-width: var(--max); margin: 4rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; font-size: .875rem; }
.site-footer__copy { margin: 0; font-size: .875rem; color: var(--graphite); }

/* ==========================================================================
   Vanliga sidor, artiklar och arkiv
   ========================================================================== */
.page-head { padding: clamp(4rem, 8vw, 7rem) var(--gutter) clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1.25rem; }
/* Produktsidorna: rubriken till vänster, appen och skärmen till höger (blocket product-visual). */
.page-head--product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; box-sizing: border-box; padding-top: clamp(2.5rem, 6vw, 5rem); }
.page-head__text { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.page-head--product > .pv { margin-block-start: 0; }
/* Brödtexten börjar i samma linje som rubriken (i stället för centrerad under den); sektionernas egen
   sidmarginal tas bort så att FAQ, galleri och formulär linjerar med texten. */
.prose--product > .section:not(.alignfull) { padding-inline: 0; max-width: var(--max); }
.prose--product.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide):not(.lead):not(.gallery):not(.video--loop)) { margin-left: max(0px, calc((100% - var(--max)) / 2)) !important; margin-right: auto !important; }
.pv { position: relative; isolation: isolate; width: 100%; max-width: 560px; aspect-ratio: 1 / .92; justify-self: end; }
.pv__glow { position: absolute; inset: 8% 0 4% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 150, 175, .35), rgba(226, 199, 158, .25) 55%, transparent); filter: blur(30px); }
.pv figure { position: absolute; margin: 0; box-sizing: border-box; }
.pv__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv__tablet { top: 0; right: 4%; width: 54%; aspect-ratio: 840 / 1302; padding: 2.4%; border-radius: 22px; background: linear-gradient(150deg, #2b2b2e, #0b0b0c 40%, #19191b); box-shadow: inset 0 0 0 1.5px #3a3a3d, 0 50px 90px -35px rgba(30, 22, 14, .55); }
.pv__tablet .pv__img { border-radius: 12px; }
.pv__phone { left: 6%; bottom: 0; width: 30%; aspect-ratio: 480 / 1043; padding: 2%; border-radius: 13% / 6%; background: linear-gradient(145deg, #2c2c2f, #0a0a0b 40%, #1b1b1d); box-shadow: inset 0 0 0 1.5px #3a3a3d, 0 40px 70px -25px rgba(30, 22, 14, .55); transform: rotate(-6deg); }
.pv__phone .pv__img { border-radius: 11% / 5%; }
.pv__card { position: absolute; z-index: 2; right: 0; bottom: 14%; display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .95); box-shadow: 0 24px 50px -20px rgba(30, 22, 14, .35); font-size: .875rem; color: var(--ink); }
.pv__check { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cta-green); color: #FFF; }
.pv__cardtext { display: flex; flex-direction: column; gap: .1rem; line-height: 1.25; }
.pv__cardlabel { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
/* Marketplace: plattan med Salong Cajs startsida, lätt lutad. */
.pv--marketplace { aspect-ratio: 1 / .95; }
.pv__tablet--marketplace { right: auto; left: 50%; width: 58%; aspect-ratio: 620 / 990; transform: translateX(-50%) rotate(3deg); }
/* Signage: tre steg i en rad – app, Digmi Box, tv. */
.pv--signage { aspect-ratio: auto; max-width: 660px; padding: 1rem 0; }
.pv__steps { display: grid; grid-template-columns: 1fr .8fr 1.55fr; align-items: end; gap: clamp(.4rem, 1.2vw, .9rem); margin: 0; padding: 0; list-style: none; }
.pv__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; min-width: 0; }
.pv .pv__device { position: relative; width: 100%; box-sizing: border-box; }
.pv__device--phone { aspect-ratio: 840 / 610; padding: 5%; border-radius: 10%; background: linear-gradient(145deg, #2c2c2f, #0a0a0b 40%, #1b1b1d); box-shadow: inset 0 0 0 1.5px #3a3a3d, 0 30px 50px -22px rgba(30, 22, 14, .5); }
.pv__device--phone .pv__img { border-radius: 6%; }
.pv__device--box { aspect-ratio: 1; overflow: hidden; border-radius: 16px; border: 5px solid #111; box-shadow: 0 24px 44px -22px rgba(30, 22, 14, .5); }
.pv__device--tv { aspect-ratio: 16 / 9; padding: 3%; border-radius: 10px; background: linear-gradient(160deg, #2b2b2e, #0b0b0c 35%, #050506); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 36px 70px -30px rgba(60, 30, 40, .5); }
.pv__device--tv .pv__img { border-radius: 2px; }
.pv__label { align-self: flex-start; display: flex; align-items: flex-start; gap: .45rem; min-height: 3.9em; font-size: clamp(.75rem, 1vw, .875rem); font-weight: 600; line-height: 1.3; text-align: left; }
.pv__num { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ink); color: #FFF; font-size: .8em; }
.pv__arrow { position: absolute; left: calc(-1 * clamp(.4rem, 1.2vw, .9rem) / 2); top: 40%; translate: -50% 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FFF; color: var(--ink); box-shadow: 0 8px 18px -8px rgba(30, 22, 14, .45); z-index: 2; }
.pv__step--tv .pv__arrow { top: 30%; }
@media (max-width: 860px) {
	.page-head--product { grid-template-columns: 1fr; }
	.pv { justify-self: center; max-width: 460px; }
	.pv--signage { max-width: 560px; }
}
@media (max-width: 560px) {
	.pv__card { gap: .5rem; padding: .5rem .7rem; border-radius: 12px; font-size: .75rem; }
	.pv__check { width: 22px; height: 22px; }
	.pv__cardlabel { font-size: .625rem; }
	.pv__arrow { width: 22px; height: 22px; }
	.pv__arrow svg { width: 14px; height: 14px; }
}
.page-head__title { margin: 0; font-size: clamp(2.75rem, 6vw, 5rem); line-height: .98; font-weight: 600; letter-spacing: -0.035em; }
.page-head__lead, .page-head__lead p { margin: 0; max-width: 40rem; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--graphite); }
.prose { padding-bottom: var(--section); font-size: 1.125rem; line-height: 1.7; }
.prose h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 3rem; }
.prose h3 { margin-top: 2.25rem; }
.prose a { color: var(--ink); }
/* Produktkorten på /produkter ligger i sidans text: länken följer kortets färg, inte textens. */
.prose .product-card__link { color: inherit; }
.prose .products__title { margin-top: 0; font-size: .75rem; }
.prose .product-card__name { margin-top: 0; }
/* Mörka sektioner inne i sidinnehållet (t.ex. Marketplace-blocket) behåller sin ljusa textfärg. */
.prose .section--ink a:not(.pill):not(.btn) { color: inherit; }
.article { padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) 0; }
.article__meta { gap: 1rem; margin-top: 1.5rem; }
.article__title { font-size: clamp(2.5rem, 5vw, 4.25rem) !important; line-height: 1 !important; letter-spacing: -0.03em; margin: 1rem 0 !important; }
.article__lead p { font-size: 1.375rem; line-height: 1.5; color: var(--graphite); }
.article__image img { border-radius: var(--radius); }
.archive-grid { padding: 0 var(--gutter) var(--section); }
.archive-grid .wp-block-post-template { gap: 2.5rem 28px; }
.pagination { margin-top: 3rem; }

/* ==========================================================================
   Responsivt
   ========================================================================== */
@media (min-width: 861px) and (max-width: 1199px) {
	.industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.industry-grid__row { display: contents; }
	.tile { flex: none !important; height: clamp(420px, 44vw, 500px); }
	.tile__title { font-size: 1.375rem; }
}

@media (max-width: 1100px) {
	.site-header__nav, .site-header__tagline { display: none; }
	.publish__stage { aspect-ratio: auto; display: flex; gap: 16px; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
	.publish__beams, .phone { display: none; }
	.pcard { position: relative; top: 0; left: auto !important; flex: 0 0 min(290px, 78vw); scroll-snap-align: start; }
	.schedule__media { grid-column: 1 / -1; }
	.schedule__text { grid-column: 1 / -1; margin-top: 2.5rem; }
	.ihero__media { width: 100%; }
	.ihero__fade { width: 100%; background: linear-gradient(90deg, var(--v-bg) 10%, color-mix(in srgb, var(--v-bg) 55%, transparent) 60%, transparent); }
	.now-playing { display: none; }
}

@media (max-width: 860px) {
	.industry-grid { display: grid; grid-template-columns: 1fr; }
	.industry-grid__row { display: contents; }
	.tile { flex: none !important; display: flex; flex-direction: column; height: auto; background: #171412; }
	.tile__media { position: relative; inset: auto; height: auto; aspect-ratio: 1; --ls-left: 0; --ls-ax: .5; }
	.tile__scrim { display: none; }
	.tile__body { position: relative; left: auto; right: auto; bottom: auto; width: auto; padding: 1.25rem 4.75rem 1.4rem 1.25rem; gap: .4rem; }
	.tile__playing { left: .9rem; top: .9rem; z-index: 5; padding: .35rem .7rem; border-radius: 999px; background: rgba(12, 11, 10, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
	.round-arrow { width: 46px; height: 46px; }
	.tile__cta { position: absolute; right: 1.25rem; top: 50%; margin: 0; transform: translateY(-50%); }
	.tile__explore { display: none; }
	.tile__title { font-size: 1.5rem; }
	.more-industries ul { margin-left: 0; }
	.more-industries__cta { margin-left: 0; }
	.audience-band, .tablet, .notatv, .faq, .lead, .site-menu__grid, .site-footer__top { grid-template-columns: 1fr; }
	.home-hero__inner { grid-template-columns: 1fr; }
	.home-hero__stage { justify-self: center; max-width: 520px; }
	.news-rail__grid, .archive-grid .wp-block-post-template { grid-template-columns: 1fr !important; }
	/* Smalare mellanrum på mobil, så att "Digmi Marketplace" ryms på en rad vid 360 px. */
	.site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
	.blueprint { display: none; }
	.flow { flex-wrap: wrap; gap: .5rem; }
	.flow__line { display: none; }
	.lead__form { grid-template-columns: 1fr; }
	.lead__intro { position: static; }
	.ihero { min-height: 0; }
	.ihero__media { position: relative; height: 420px; width: 100%; }
	.ihero__fade { background: linear-gradient(to top, var(--v-bg), transparent 45%); width: 100%; }
	.ihero__content { padding: 0 var(--gutter) 4rem; margin-top: -3rem; }
	.site-header--overlay { position: absolute; }
	.tablet__device { height: auto; }
	.tablet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
	.product { padding: .6rem; }
	.product__name { font-size: .75rem; }
	.product .pill--sm { min-height: 32px; padding: .35rem .5rem; font-size: .6875rem; white-space: nowrap; }
	.tablet__screen { padding: 1rem; }
	.tablet__cart { padding: .4rem .7rem; font-size: .6875rem; white-space: nowrap; }
	.notatv__stage { height: 480px; }
	.device { width: 240px; height: 424px; }
	.site-header .btn--sm { display: none; }
}

/* Stående skärmar kräver en kvadratisk bildyta för att TV:n ska få plats; två kolumner håller höjden nere. */
@media (min-width: 560px) and (max-width: 860px) {
	.industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tile__title { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.ihero__screen { --ls-scale: 1; }
	.ihero__screen .ls__stage, .now-playing { transform: none !important; }
}

/* Priser och kontakt */
.price-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 2rem 0 1rem; }
.price-table--single { grid-template-columns: minmax(0, 26rem); }
.price-card { display: flex; flex-direction: column; gap: .5rem; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #FFF; }
.price-card--hl { background: var(--ink); color: #FFF; border-color: var(--ink); }
.price-card--hl .eyebrow, .price-card--hl .price-card__unit { color: rgba(255, 255, 255, .75); }
.price-card p { margin: 0; }
.price-card__price { font-family: var(--serif); font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; }
.price-card__unit { color: var(--graphite); }
.price-note { font-size: .875rem; color: var(--graphite); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 2rem 0; }
.contact-grid p { margin: .25rem 0 0; }
@media (max-width: 860px) { .price-table, .contact-grid { grid-template-columns: 1fr; } }

/* Sökresultat: sidor har inget publiceringsdatum att visa, bara nyheter. */
.search .wp-block-post.type-page .wp-block-post-date { display: none; }

/* Video och kundbilder (riktigt material) */
.video { margin: 2rem auto; max-width: var(--max); }
.video__media { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #111; }
.video--loop .video__media { aspect-ratio: 16 / 9; object-fit: cover; }
.video__caption { margin-top: .75rem; font-size: .9375rem; color: var(--graphite); }
.video__steps { margin-top: .75rem; font-size: .9375rem; color: var(--graphite); }
.video__steps summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.video__steps ol { margin: .6rem 0 0; padding-left: 1.25rem; line-height: 1.6; }
.gallery { max-width: var(--max); margin-inline: auto; }
.gallery__head { display: flex; flex-direction: column; gap: 1rem; max-width: 44rem; margin-bottom: 2.5rem; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; margin: 0; padding: 0; list-style: none; }
.gallery__item { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.gallery__item--wide { grid-column: span 2; aspect-ratio: auto; }
.gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-badges { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0; }
.app-badges img { display: block; height: 48px; width: auto; }
@media (max-width: 860px) {
	.gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Fotots egen skärmbild som första bild i bildspelet */
.ls__slide--img { padding: 0; }
/* Foto bakom texten: texten ligger över bilden, en mörk ton uppifrån och nedifrån håller den läsbar. */
.ls__bg { position: absolute; inset: 0; z-index: -2; }
.ls__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls__slide--photo { background: #111; color: #FFF; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.ls__slide--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .4) 34%, rgba(0, 0, 0, .42) 66%, rgba(0, 0, 0, .68) 100%); }
.ls__slide--img picture, .ls__slide-img { display: block; width: 100%; height: 100%; }
.ls__slide-img { object-fit: cover; }

/* Formulär, galleri och video i sidinnehållet: bredare än textkolumnen (760px) så att två kolumner får plats. */
.prose > .lead, .prose > .gallery, .prose > .video--loop { max-width: var(--max); box-sizing: border-box; }
@media (max-width: 1100px) { .prose > .lead { grid-template-columns: minmax(0, 1fr); } }

/* Testa hemma (ovanför sidfoten på alla sidor) */
.try-app { background: #0F0E0D; color: #FFF; padding: clamp(4rem, 8vw, 7rem) var(--gutter); }
.try-app__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: var(--max); margin: 0 auto; }
.try-app__text { display: flex; flex-direction: column; gap: 1.25rem; }
.try-app .eyebrow, .try-app .lead-muted, .try-app .video__caption { color: rgba(255, 255, 255, .78); }
.try-app .video__steps, .try-app .video__steps summary { color: rgba(255, 255, 255, .85); }
.try-app a { color: inherit; }
.try-app__steps { margin: .5rem 0 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.try-app__steps li { line-height: 1.5; }
.try-app__video { margin: 0; }
/* Leverantörer i Digmi */
.suppliers { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.suppliers__text { display: flex; flex-direction: column; gap: 1.25rem; }
.suppliers__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.suppliers__logos li { display: grid; place-items: center; height: 72px; box-sizing: border-box; padding: 0; border-radius: var(--radius); background: #FFF; }
.suppliers__logos img { display: block; max-width: 100%; max-height: 38px; width: auto; height: auto; }
/* Loggor: gråskala i vila, originalfärger vid hover. Loggor som bara finns i vitt visas svarta. */
.brand-logo { opacity: .42; transition: filter .35s ease, opacity .35s ease, transform .35s var(--ease); }
.brand-logo--color { filter: grayscale(1) brightness(.85); }
.brand-logo--dark { filter: brightness(0); }
.brand-logo--invert { filter: invert(1) hue-rotate(180deg); }
.suppliers__logos .brand-logo--square { max-height: 43px; }
.brand-link, .brand-tile { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
/* Hela rutan är klickbar: luften ligger på länken (eller den olänkade motsvarigheten), inte på rutan. */
.suppliers__logos .brand-link, .suppliers__logos .brand-tile { padding: .9rem 1.1rem; box-sizing: border-box; }
/* Bara länkade loggor reagerar: en eventuell olänkad logga ska inte se klickbar ut. */
.brand-link:hover .brand-logo, .brand-link:focus-visible .brand-logo { opacity: 1; transform: scale(1.06); }
.brand-link:hover .brand-logo--color, .brand-link:focus-visible .brand-logo--color { filter: none; }
@media (hover: none) { .brand-logo--color { filter: none; } .brand-logo { opacity: 1; } }
@media (max-width: 600px) { .suppliers__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .try-app__inner, .suppliers, .steps__list, .products__grid { grid-template-columns: minmax(0, 1fr); } }
/* Klickbar platta (marketplace-demo). Plattan är 800 × 1280 dp som appen (--d är en dp), så appens mått gäller
   rakt av: statusrad 24, loggrad 96, toppraden 90, välkomstytan en fjärdedel av höjden, rutor med 12 dp radie.
   Ramen är behållaren: 100cqw är dess innehållsbredd, alltså skärmens. */
.mp { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.mp__head { display: flex; flex-direction: column; gap: 1.25rem; max-width: var(--max); width: 100%; margin-inline: auto; }
.mp__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.mp__tab { min-height: 44px; padding: .7rem 1.25rem; border: 1.5px solid #D9D2C6; border-radius: 999px; background: transparent; color: var(--ink); font: 600 1rem/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mp__tab:hover, .mp__tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #FFF; }
.mp__example { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; max-width: var(--max); width: 100%; margin-inline: auto; }
.mp__example[hidden] { display: none; }
.mp__panel { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 6rem; }
.mp__explain { padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: #FFF; }
/* Alla förklaringar ligger i samma ruta och rutan är så hög som den längsta: plattan hoppar inte när texten byts. */
.mp__explain { display: grid; }
.mp__text { grid-area: 1 / 1; }
.mp__text[hidden] { display: block; visibility: hidden; }
.mp__text h3 { margin: 0 0 .6rem; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.mp__text p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--graphite); }
.mp__features { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mp__feature { min-height: 44px; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #FFF; color: var(--ink); font: 500 .9375rem/1.2 var(--sans); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.mp__feature:hover, .mp__feature.is-on { border-color: var(--ink); background: var(--warm); }
.mpt { width: 100%; }
.mp__note { margin: .9rem 0 0; font-size: .8125rem; color: var(--stone-text); text-align: center; }
.mpt__frame { box-sizing: border-box; padding: 3.2%; border-radius: 5.5% / 3.5%; background: #111; box-shadow: 0 40px 80px rgba(0, 0, 0, .22), inset 0 0 0 2px #2A2A2C; container-type: inline-size; }
.mpt__screen { --d: calc(100cqw / 800); --mp-bg: #F9FAFB; --mp-bar: #FFF; --mp-fg: #32323A; --mp-rule: #EAEAEB; --mp-accent: #F19B06; position: relative; aspect-ratio: 800 / 1280; overflow: hidden; overflow: clip; display: flex; flex-direction: column; border-radius: calc(var(--d) * 10); background: var(--mp-bg); color: var(--mp-fg); font-family: var(--sans); font-size: calc(var(--d) * 26); line-height: 1.3; }
.mpt__screen[data-theme="dark"], .mpt__home[data-theme="dark"] { --mp-bg: #1B1B1B; --mp-bar: #000; --mp-fg: #FFF; --mp-rule: #3E3E3E; --mp-accent: #CC8305; }
.mpt__screen svg { display: block; width: calc(var(--d) * 44); height: calc(var(--d) * 44); }
/* Toppradens ikon är salongens egen bild, ritad som mask i textfärgen – så tonar appen den i ljust och mörkt tema. */
.mpt__icon { width: calc(var(--d) * 44); height: calc(var(--d) * 44); border-radius: calc(var(--d) * 8); background: currentColor; -webkit-mask: var(--i, none) center / contain no-repeat; mask: var(--i, none) center / contain no-repeat; }
/* I högkontrastläge färgas bakgrunder om: ikonen behåller då systemets textfärg, annars försvinner den. */
@media (forced-colors: active) { .mpt__icon { background: CanvasText; forced-color-adjust: none; } }
.mpt__icon--image { background: none; -webkit-mask: none; mask: none; object-fit: contain; }
.mpt__logo { max-width: 55%; max-height: calc(var(--d) * 64); object-fit: contain; object-position: left center; }
.mpt__screen button { font-family: inherit; }
/* Sajtens fokusram är nästan svart och syns inte på plattans mörka ytor: här är den orange som appens markering, innanför kanten. */
.mpt :focus-visible { outline: max(2px, calc(var(--d) * 4)) solid #F19B06; outline-offset: calc(var(--d) * -4); }
/* Rutornas bild och skärmsläckarens kampanjer täcker hela knappen och målas över dess ram: där ritas ramen sist, ovanpå. */
.mpt__tile:focus-visible::after, .mpt__saver:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 max(3px, calc(var(--d) * 6)) #F19B06; pointer-events: none; }
.mpt__status { flex: none; display: flex; justify-content: space-between; align-items: center; height: calc(var(--d) * 36); padding: 0 calc(var(--d) * 20); background: #000; color: #FFF; font-size: calc(var(--d) * 20); }
.mpt__home { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--mp-bg); color: var(--mp-fg); }
.mpt__home[hidden] { display: none; }
.mpt__logos { flex: none; display: flex; justify-content: space-between; align-items: center; height: calc(var(--d) * 96); padding: 0 calc(var(--d) * 24); background: var(--mp-bar); }
.mpt__salon { font-family: var(--serif); font-size: calc(var(--d) * 44); font-weight: 400; letter-spacing: -0.01em; }
.mpt__digmi { font-size: calc(var(--d) * 26); font-weight: 700; letter-spacing: -0.03em; opacity: .7; }
.mpt__top { flex: none; display: flex; height: calc(var(--d) * 100); padding: 0 calc(var(--d) * 12); background: var(--mp-bar); border-bottom: max(1px, calc(var(--d) * 1)) solid var(--mp-rule); }
.mpt__topitem { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(var(--d) * 6); padding: calc(var(--d) * 15) calc(var(--d) * 2) 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.mpt__topitem:hover, .mpt__topitem.is-on { color: var(--mp-accent); }
/* Ikonerna börjar på samma höjd, så att raden är jämn även när en etikett har två rader. Med en rad står ikon och
   etikett mitt i raden (15 + 44 + 6 + 16,8 av 99 enheter); två rader ryms precis (15 + 44 + 6 + 33,6). Etiketten
   bryts mellan ord; ett ord bryts bara om det inte får plats på en egen rad. */
.mpt__toplabel { max-width: 100%; max-height: 2.1em; overflow: hidden; overflow-wrap: break-word; font-size: calc(var(--d) * 16); line-height: 1.05; letter-spacing: -0.01em; text-align: center; }
.mpt__hero { flex: none; display: grid; grid-template-columns: 64% 36%; height: calc(var(--d) * 250); }
.mpt__hero img, .mpt__tile img { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; }
/* "Bild över hela ytan" i portalen: välkomstbilden fyller raden. */
.mpt__hero--single { display: block; }
.mpt__welcomesmall { font-size: calc(var(--d) * 22); font-weight: 700; }
.mpt__welcome { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--d) * 10); padding: 0 calc(var(--d) * 24); }
.mpt__welcome strong { font-family: var(--serif); font-size: calc(var(--d) * 46); font-weight: 400; line-height: 1.05; }
.mpt__welcometext { font-size: calc(var(--d) * 22); opacity: .8; }
.mpt__row { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mpt__row:last-child { padding-bottom: calc(var(--d) * 28); }
.mpt__rowtitle { flex: none; margin: calc(var(--d) * 20) calc(var(--d) * 12) calc(var(--d) * 8); font-size: calc(var(--d) * 24); font-weight: 600; }
/* En till tre rutor delar på bredden; fyra eller fler är var och en en dryg fjärdedel och raden rullas i sidled.
   Rullningslisten syns, så att den som har mus utan sidrullning ser att det finns fler rutor. */
.mpt__tiles { flex: 1; min-height: 0; display: flex; gap: calc(var(--d) * 12); padding: 0 calc(var(--d) * 12); padding-bottom: calc(var(--d) * 6); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.mpt__tile { position: relative; flex: 1 0 0; min-width: 0; overflow: hidden; padding: 0; border: 0; border-radius: calc(var(--d) * 12); background: var(--c, #6B5A48); color: #FFF; cursor: pointer; box-shadow: 0 calc(var(--d) * 8) calc(var(--d) * 24) rgba(0, 0, 0, .12); transition: transform .2s var(--ease); }
.mpt__tiles[data-count="4"] .mpt__tile { flex: 0 0 28.5%; }
.mpt__tile:hover { transform: scale(.98); }
.mpt__tile img { position: absolute; inset: 0; }
.mpt__label { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--d) * 50) calc(var(--d) * 14) calc(var(--d) * 20); background: linear-gradient(transparent, rgba(0, 0, 0, .78)); font-size: calc(var(--d) * 27); font-weight: 600; line-height: 1.15; text-align: center; }
/* Det som öppnas ligger över startsidan, under statusraden. */
.mpt__layer { position: absolute; inset: calc(var(--d) * 36) 0 0; z-index: 2; display: flex; flex-direction: column; background: #FFF; color: #1A1A1F; }
.mpt__layer[hidden] { display: none; }
.mpt__address { flex: none; margin: calc(var(--d) * 16); padding: calc(var(--d) * 12) calc(var(--d) * 20); border-radius: 999px; background: #F0F0F2; font-size: max(10px, calc(var(--d) * 22)); color: #5A5A63; }
.mpt__page, .mpt__paper { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--d) * 18); padding: calc(var(--d) * 32) calc(var(--d) * 36); }
.mpt__page strong, .mpt__paper strong, .mpt__app strong { font-family: var(--serif); font-size: calc(var(--d) * 54); font-weight: 400; line-height: 1.05; }
.mpt__pagetext { font-size: max(11px, calc(var(--d) * 26)); color: #5A5A63; }
.mpt__line { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--d) * 16); padding: calc(var(--d) * 20) 0; border-top: max(1px, calc(var(--d) * 1)) solid #E4E4E8; font-size: max(11px, calc(var(--d) * 26)); }
.mpt__line > :first-child { font-weight: 600; }
.mpt__line > span:nth-child(2) { color: #5A5A63; text-align: right; }
.mpt__doc { background: #EDEDEF; }
.mpt__paper { margin: 0 calc(var(--d) * 24) calc(var(--d) * 24); border-radius: calc(var(--d) * 8); background: #FFF; box-shadow: 0 calc(var(--d) * 6) calc(var(--d) * 20) rgba(0, 0, 0, .08); }
.mpt__back { align-self: flex-start; margin: calc(var(--d) * 16) calc(var(--d) * 24); padding: calc(var(--d) * 12) calc(var(--d) * 22); border: 0; border-radius: 999px; background: #1A1A1F; color: #FFF; min-height: 28px; font-size: max(11px, calc(var(--d) * 22)); font-weight: 600; cursor: pointer; }
.mpt__solid { padding: calc(var(--d) * 16) calc(var(--d) * 28); border: max(1px, calc(var(--d) * 1.5)) solid #1A1A1F; border-radius: 999px; background: #1A1A1F; color: #FFF; min-height: 28px; font-size: max(11px, calc(var(--d) * 24)); font-weight: 600; cursor: pointer; }
.mpt__paper > .mpt__solid { align-self: flex-start; }
/* En bild av det rutan öppnar. Den är ofta högre än skärmen och rullas i höjdled; rullningen går vidare till sidan
   när bilden tar slut, så plattan fångar inte sidans rullning. */
.mpt__shot { background: #FFF; }
.mpt__scroller { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mpt__scroller img { display: block; width: 100%; height: auto; }
.mpt__choice--more::after { content: "›"; float: right; color: #8A8A94; }
/* Appens knapp tillbaka till Digmi: en mörk bricka med orange ikon i nedre vänstra hörnet. */
.mpt__float { position: absolute; left: calc(var(--d) * 40); bottom: calc(var(--d) * 40); display: grid; place-items: center; width: max(40px, calc(var(--d) * 88)); height: max(40px, calc(var(--d) * 88)); padding: 0; border: 0; border-radius: calc(var(--d) * 12); background: rgba(0, 0, 0, .8); color: #F19B06; cursor: pointer; }
.mpt__app { align-items: center; justify-content: center; gap: calc(var(--d) * 20); background: #17171A; color: #FFF; text-align: center; }
.mpt__app .mpt__pagetext { color: rgba(255, 255, 255, .7); }
.mpt__appicon { display: grid; place-items: center; width: calc(var(--d) * 180); height: calc(var(--d) * 180); object-fit: cover; border-radius: calc(var(--d) * 40); background: linear-gradient(135deg, #F19B06, #C2410C); font-size: calc(var(--d) * 90); font-weight: 700; }
/* Menyn i toppraden: ett kort under raden, med resten av skärmen som stängningsyta. */
.mpt__menu, .mpt__pin { background: rgba(0, 0, 0, .45); }
.mpt__scrim { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }
.mpt__dropdown { position: relative; align-self: center; display: flex; flex-direction: column; width: 62%; max-height: 80%; overflow-y: auto; margin-top: calc(var(--d) * 200); padding: calc(var(--d) * 12); border-radius: calc(var(--d) * 12); background: #FFF; box-shadow: 0 calc(var(--d) * 16) calc(var(--d) * 40) rgba(0, 0, 0, .3); }
.mpt__dropdowntitle { padding: calc(var(--d) * 14) calc(var(--d) * 16) calc(var(--d) * 10); font-size: calc(var(--d) * 20); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8A8A94; }
.mpt__choice { padding: calc(var(--d) * 22) calc(var(--d) * 16); border: 0; border-top: max(1px, calc(var(--d) * 1)) solid #E4E4E8; background: transparent; color: #1A1A1F; min-height: 32px; font-size: max(11px, calc(var(--d) * 26)); font-weight: 600; text-align: left; cursor: pointer; }
.mpt__choice:hover { color: #C2410C; }
.mpt__pin { align-items: center; justify-content: center; }
.mpt__dialog { display: flex; flex-direction: column; align-items: center; gap: calc(var(--d) * 18); width: 62%; padding: calc(var(--d) * 36) calc(var(--d) * 28); border: max(1px, calc(var(--d) * 2)) solid #F19B06; border-radius: calc(var(--d) * 8); background: #FFF; text-align: center; }
.mpt__dialog strong { font-size: calc(var(--d) * 32); }
.mpt__dots { font-size: calc(var(--d) * 44); letter-spacing: .2em; }
.mpt__hint { font-size: calc(var(--d) * 22); color: #5A5A63; }
.mpt__dialogbuttons { display: flex; gap: calc(var(--d) * 14); }
/* Skärmsläckaren: kampanjerna tonar över i varandra; hela ytan stänger. */
.mpt__saver { padding: 0; border: 0; background: #000; cursor: pointer; }
.mpt__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--d) * 70) calc(var(--d) * 60); background: var(--s-bg); color: var(--s-fg); text-align: left; opacity: 0; animation: mp-saver 12s infinite; }
.mpt__slide:nth-of-type(3) { animation-delay: 4s; }
.mpt__slide:nth-of-type(4) { animation-delay: 8s; }
.mpt__slidek, .mpt__slidef { font-size: calc(var(--d) * 24); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.mpt__slidet { font-size: calc(var(--d) * 150); line-height: .95; }
@keyframes mp-saver { 0%, 100% { opacity: 0; } 6%, 33% { opacity: 1; } 40% { opacity: 0; } }
/* Digmi Shopping i plattan (shop.php). Mått och färger ur appens shop (Theme.Digmi.Shop): papper #FBFAF7, varm #F4F1EC,
   bläck #111, linje #E4DED4, grönt #1F7A45. Shoppen har sitt eget ljusa utseende, även när plattan är mörk. */
.shop { --shop-line: #E4DED4; --shop-stone: #6B6358; background: #FBFAF7; color: #111; font-family: var(--sans); }
.shop__bar { flex: none; display: flex; align-items: center; gap: calc(var(--d) * 12); padding: calc(var(--d) * 28) calc(var(--d) * 32) 0; }
.shop__circle { position: relative; flex: none; display: grid; place-items: center; width: max(40px, calc(var(--d) * 56)); height: max(40px, calc(var(--d) * 56)); padding: 0; border: max(1px, calc(var(--d) * 1)) solid var(--shop-line); border-radius: 999px; background: transparent; color: #111; cursor: pointer; }
.shop__circle svg { width: calc(var(--d) * 26); height: calc(var(--d) * 26); }
.shop__brands { flex: none; padding: calc(var(--d) * 16) calc(var(--d) * 22); border-radius: 999px; background: #111; color: #FBFAF7; font-size: calc(var(--d) * 16); font-weight: 600; }
.shop__search { flex: 1; min-width: 0; padding: calc(var(--d) * 16) calc(var(--d) * 22); border: max(1px, calc(var(--d) * 1)) solid var(--shop-line); border-radius: 999px; background: #FFF; color: var(--shop-stone); font-size: calc(var(--d) * 17); }
.shop__badge { position: absolute; top: calc(var(--d) * -6); right: calc(var(--d) * -6); min-width: calc(var(--d) * 24); padding: 0 calc(var(--d) * 6); box-sizing: border-box; border-radius: 999px; background: #5BD18B; color: #111; font-size: max(10px, calc(var(--d) * 13)); font-weight: 600; line-height: max(16px, calc(var(--d) * 24)); text-align: center; }
.shop__badge[hidden], .shop__card[hidden], .shop__line[hidden], .shop__empty[hidden], .shop__filled[hidden], .shop__sumrow[hidden] { display: none; }
.shop__scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: calc(var(--d) * 18); padding: calc(var(--d) * 24) calc(var(--d) * 32) calc(var(--d) * 32); }
.shop__scroll > * { flex: none; }
.shop__crumb, .shop__count { font-size: calc(var(--d) * 15); color: var(--shop-stone); }
.shop__titlerow { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--d) * 16); }
.shop__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: calc(var(--d) * 56); line-height: 1; }
.shop__chips { display: flex; flex-wrap: wrap; gap: calc(var(--d) * 8); }
.shop__chip { min-height: max(28px, calc(var(--d) * 44)); padding: 0 calc(var(--d) * 18); border: max(1px, calc(var(--d) * 1)) solid var(--shop-line); border-radius: 999px; background: transparent; color: #111; font-size: max(11px, calc(var(--d) * 15)); font-weight: 500; cursor: pointer; }
.shop__chip.is-on { border-color: #111; background: #111; color: #FBFAF7; }
.shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--d) * 28) calc(var(--d) * 20); }
.shop__card { display: flex; flex-direction: column; gap: calc(var(--d) * 8); min-width: 0; }
.shop__image { display: grid; place-items: center; height: calc(var(--d) * 232); border-radius: calc(var(--d) * 10); background: #F4F1EC; }
.shop .shop__image svg { width: auto; height: 70%; }
.shop__card.is-out .shop__image svg { opacity: .45; }
.shop__brand, .shop__caps { font-size: calc(var(--d) * 12); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--shop-stone); }
.shop__name { min-height: 2.5em; font-size: calc(var(--d) * 17); font-weight: 600; line-height: 1.25; }
.shop__pricerow { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--d) * 8); }
.shop__price { font-size: calc(var(--d) * 18); font-weight: 600; }
.shop__stock { font-size: calc(var(--d) * 13); color: #1F7A45; }
.shop__stock--low { color: #8A5A00; }
.shop__stock--out { color: #9A3324; }
.shop__add { min-height: max(28px, calc(var(--d) * 46)); border: max(1px, calc(var(--d) * 1)) solid #111; border-radius: 999px; background: #111; color: #FBFAF7; font-size: max(11px, calc(var(--d) * 15)); font-weight: 600; cursor: pointer; }
.shop__add:disabled { border-color: var(--shop-line); background: transparent; color: var(--shop-stone); cursor: default; }
.shop__toast { position: absolute; left: 50%; bottom: calc(var(--d) * 40); max-width: 86%; padding: calc(var(--d) * 14) calc(var(--d) * 22); border-radius: 999px; background: #111; color: #FBFAF7; font-size: max(11px, calc(var(--d) * 15)); transform: translateX(-50%); transition: opacity .2s; }
/* Toasten finns alltid kvar som live-region; tom syns den bara inte. */
.shop__toast:empty { opacity: 0; pointer-events: none; }
/* Rutor över shoppen: kunduppgifterna och kontantinstruktionen. */
/* Bara ett lager syns åt gången, så rutan ligger på en nedtonad shopfärg i stället för över salongens startsida. */
.shop--dim { align-items: center; justify-content: center; background: linear-gradient(rgba(17, 17, 17, .7), rgba(17, 17, 17, .7)), #FBFAF7; }
.shop__dialog { display: flex; flex-direction: column; gap: calc(var(--d) * 16); width: 80%; padding: calc(var(--d) * 32); border-radius: calc(var(--d) * 16); background: #FFF; color: #111; }
.shop__dialogtitle { font-size: max(13px, calc(var(--d) * 22)); }
.shop__dialogtext { font-size: max(11px, calc(var(--d) * 17)); color: #4A4640; }
.shop__field { padding: calc(var(--d) * 14) calc(var(--d) * 16); border: max(1px, calc(var(--d) * 1.5)) solid #C9C3B8; border-radius: calc(var(--d) * 10); font-size: max(11px, calc(var(--d) * 17)); }
.shop__button { min-height: max(32px, calc(var(--d) * 52)); border: 0; border-radius: calc(var(--d) * 12); background: #111; color: #FFF; font-size: max(12px, calc(var(--d) * 17)); font-weight: 700; cursor: pointer; }
.shop__link { padding: 0; border: 0; background: transparent; color: var(--shop-stone); font-size: max(11px, calc(var(--d) * 15)); text-decoration: underline; cursor: pointer; }
/* Varukorgen. */
.shop__customer { display: flex; align-items: center; gap: calc(var(--d) * 12); padding: calc(var(--d) * 10) calc(var(--d) * 18); border: max(1px, calc(var(--d) * 1)) solid var(--shop-line); border-radius: 999px; font-size: calc(var(--d) * 15); white-space: nowrap; }
.shop__clear { padding: 0; border: 0; background: transparent; color: var(--shop-stone); font-size: inherit; text-decoration: underline; cursor: pointer; }
.shop__empty { padding: calc(var(--d) * 80) 0; font-family: var(--serif); font-size: calc(var(--d) * 36); font-weight: 400; color: var(--shop-stone); text-align: center; }
.shop__filled { display: flex; flex-direction: column; gap: calc(var(--d) * 18); }
.shop__service { padding: calc(var(--d) * 20) 0; border-bottom: max(1px, calc(var(--d) * 1)) solid var(--shop-line); font-size: calc(var(--d) * 17); color: var(--shop-stone); }
.shop__line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: calc(var(--d) * 16); padding-bottom: calc(var(--d) * 18); border-bottom: max(1px, calc(var(--d) * 1)) solid var(--shop-line); }
.shop__thumb { display: grid; place-items: center; width: calc(var(--d) * 96); height: calc(var(--d) * 96); border-radius: calc(var(--d) * 10); background: #F4F1EC; }
.shop .shop__thumb svg { width: auto; height: 70%; }
.shop__linename, .shop__linetotal { font-size: calc(var(--d) * 19); font-weight: 600; }
.shop__qty { display: flex; align-items: center; gap: calc(var(--d) * 4); border: max(1px, calc(var(--d) * 1)) solid var(--shop-line); border-radius: 999px; font-size: calc(var(--d) * 18); }
.shop__qty button:disabled { opacity: .3; cursor: default; }
.shop__qty button, .shop__remove { width: max(28px, calc(var(--d) * 48)); height: max(28px, calc(var(--d) * 48)); padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: max(14px, calc(var(--d) * 24)); cursor: pointer; }
.shop__remove { color: var(--shop-stone); }
.shop__methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--d) * 12); }
.shop__method { display: flex; align-items: center; gap: calc(var(--d) * 12); min-height: max(36px, calc(var(--d) * 72)); padding: 0 calc(var(--d) * 20); border: max(1px, calc(var(--d) * 1)) solid var(--shop-line); border-radius: calc(var(--d) * 10); background: transparent; color: #111; font-size: max(12px, calc(var(--d) * 17)); font-weight: 600; cursor: pointer; }
.shop__method svg { width: calc(var(--d) * 28); height: calc(var(--d) * 28); }
.shop__method[aria-pressed="true"] { border-color: #111; background: #FFF; box-shadow: inset 0 0 0 max(1px, calc(var(--d) * 1)) #111; }
.shop__summary, .shop__paid { display: flex; flex-direction: column; gap: calc(var(--d) * 12); padding: calc(var(--d) * 24); border-radius: calc(var(--d) * 10); background: #F4F1EC; }
.shop__sumrow { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--d) * 16); font-size: calc(var(--d) * 17); }
.shop__sumrow--total { padding-top: calc(var(--d) * 12); border-top: max(1px, calc(var(--d) * 1)) solid var(--shop-line); font-size: calc(var(--d) * 19); }
.shop__sumrow--total strong { font-family: var(--serif); font-size: calc(var(--d) * 44); font-weight: 400; line-height: 1; }
.shop__proceed, .shop__home { min-height: max(36px, calc(var(--d) * 64)); border: 0; border-radius: 999px; background: #1F7A45; color: #FFF; font-size: max(12px, calc(var(--d) * 19)); font-weight: 600; cursor: pointer; }
.shop__proceed:disabled { opacity: .3; cursor: default; }
/* Lager som är knappar (betalsteget, skärmsläckaren): en absolut placerad knapp tar inte säkert sin storlek av
   inset i alla webbläsare, så måtten står uttryckligen. */
.shop--tap, .mpt__saver { width: 100%; height: calc(100% - var(--d) * 36); }
/* Betalsteget: appen lämnar över till Softpay. Det här är en neutral bild av det ögonblicket; hela ytan är knappen. */
.shop--tap { align-items: center; justify-content: center; gap: calc(var(--d) * 24); padding: 0; border: 0; background: #111; color: #FBFAF7; text-align: center; cursor: pointer; }
.shop__tapicon { display: grid; place-items: center; width: calc(var(--d) * 220); height: calc(var(--d) * 220); border: max(2px, calc(var(--d) * 3)) solid rgba(251, 250, 247, .35); border-radius: 999px; animation: shop-tap 1.8s ease-in-out infinite; }
.shop .shop__tapicon svg { width: 50%; height: 50%; }
.shop__tapamount { font-family: var(--serif); font-size: calc(var(--d) * 72); font-weight: 400; }
.shop__taptext { font-size: max(12px, calc(var(--d) * 22)); }
.shop__taphint { font-size: max(11px, calc(var(--d) * 16)); color: #D9D3C8; }
@keyframes shop-tap { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* Bekräftelsen är mörk som i appen. */
.shop--thanks { background: #111; color: #FBFAF7; }
.shop--thanks .shop__scroll { align-items: stretch; padding-top: calc(var(--d) * 80); }
.shop__check { align-self: flex-start; display: grid; place-items: center; width: calc(var(--d) * 110); height: calc(var(--d) * 110); border-radius: 999px; background: #5BD18B; color: #111; }
.shop .shop__check svg { width: 55%; height: 55%; }
.shop__thanks { font-family: var(--serif); font-size: calc(var(--d) * 64); font-weight: 400; line-height: 1; }
.shop__thankstext { font-size: max(11px, calc(var(--d) * 16)); color: #D9D3C8; }
.shop--thanks .shop__paid { background: #1D1D1D; }
.shop--thanks .shop__caps { color: #D9D3C8; }
.shop--thanks .shop__sumrow--total { border-color: #3A3A3A; }
.shop__home { background: #FBFAF7; color: #111; }
@media (prefers-reduced-motion: reduce) { .shop__tapicon { animation: none; } }
/* Utan container-enheter går plattan inte att skala: då visas förklaringarna utan platta. */
/* Hårdvaran (blocks/hardware): kundernas skärmar i en snurra, Samsungs serier, monteringen, Digmi Box och kundcasen. */
.hw { display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); }
.hw__head { max-width: 46rem; }
.hw__block { display: flex; flex-direction: column; gap: 2rem; }
.hw__intro { display: flex; flex-direction: column; gap: .9rem; max-width: 46rem; }
.hw__h { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; }
.hw__text { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--graphite); }
.hw__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hw__facts li { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; }
/* Snurran går ut över sektionens luft. Spåret har bilderna två gånger och flyttas exakt en omgång (halva spåret
   plus ett mellanrum), så att den går runt utan hopp; luften vid sidan ligger därför på ramen, inte på spåret. */
.hw__reel { position: relative; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow: hidden; outline-offset: -4px; }
.hw__track { display: flex; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; }
/* Rullar bara när skriptet har gett snurran en pausknapp, och står still när den inte syns. */
@media (prefers-reduced-motion: no-preference) { .hw__reel.is-ready .hw__track { animation: hw-reel 60s linear infinite; } }
.hw__reel:not(.is-ready) { overflow-x: auto; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
.hw__reel:not(.is-ready) .hw__shot { scroll-snap-align: start; }
.hw__reel:not(.is-ready) .hw__shot[aria-hidden="true"] { display: none; }
/* Pausas med knappen (inte vid hovring eller fokus: då gick det inte att starta igen med knappen). */
.hw__reel.is-paused .hw__track, .hw__reel.is-offscreen .hw__track { animation-play-state: paused; }
.hw__pause { position: absolute; top: 12px; right: calc(var(--gutter) + 12px); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 17, 17, .72); color: #FFF; cursor: pointer; }
.hw__pause[hidden] { display: none; }
.hw__pause .hw__icon-play, .hw__pause[aria-pressed="true"] .hw__icon-pause { display: none; }
.hw__pause[aria-pressed="true"] .hw__icon-play { display: block; }
@keyframes hw-reel { to { transform: translateX(calc(-50% - 7px)); } }
.hw__shot { position: relative; flex: none; height: clamp(300px, 34vw, 460px); border-radius: var(--radius); overflow: hidden; background: var(--warm); }
.hw__shot picture, .hw__shot img { display: block; height: 100%; width: auto; }
.hw__who { position: absolute; left: 12px; bottom: 12px; padding: .35rem .75rem; border-radius: 999px; background: rgba(17, 17, 17, .72); color: #FFF; font-size: .8125rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
	.hw__reel { overflow-x: auto; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
	.hw__track { animation: none; }
	.hw__shot { scroll-snap-align: start; }
	.hw__shot[aria-hidden="true"] { display: none; }
	.hw__pause { display: none; }
}
.hw__series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hw__serie { display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); background: var(--warm); }
.hw__serie:last-child { background: var(--ink); color: #FFF; }
.hw__serie:last-child .hw__facts li { border-color: rgba(255, 255, 255, .28); }
.hw__serie:last-child .hw__name { color: rgba(255, 255, 255, .7); }
.hw__name { margin: 0; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-text); }
.hw__big { margin: 0; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hw__more { margin: 0; color: var(--graphite); }
.hw__more a { color: var(--ink); font-weight: 600; text-underline-offset: .25em; }
.hw__serietitle { margin: 0; font-size: 1.1875rem; letter-spacing: -0.01em; }
.hw__mountgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hw__mount { display: flex; flex-direction: column; gap: .75rem; }
.hw__photos { display: grid; gap: 8px; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--warm); }
.hw__photos[data-count="2"] { grid-template-columns: 1fr 1fr; }
.hw__photos picture, .hw__photos img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.hw__mounttitle { margin: .5rem 0 0; font-size: 1.375rem; letter-spacing: -0.02em; }
.hw__product { margin: 0; font-size: .875rem; color: var(--stone-text); }
.hw__box { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius); background: var(--ink); color: #FFF; }
.hw__box .eyebrow, .hw__box .hw__text { color: rgba(255, 255, 255, .78); }
.hw__box .hw__facts li { border-color: rgba(255, 255, 255, .28); }
.hw__boxphotos { display: grid; justify-items: center; margin: 0; }
.hw__boxphotos picture, .hw__boxphotos img { display: block; width: 100%; max-width: 360px; height: auto; border-radius: 12px; }
.hw__offer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--line); border-radius: var(--radius); background: #FFF; }
.hw__included { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; list-style: none; font-size: 1.0625rem; }
.hw__included li { display: flex; align-items: flex-start; gap: .75rem; }
.hw__included svg { flex: none; margin-top: .2em; color: var(--cta-green); }
.hw .hw__offercta { grid-column: 1 / -1; justify-self: start; color: #FFF; }
.hw__cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hw__case { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; color: #FFF; text-decoration: none; }
.hw__case picture, .hw__case img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.hw__case:hover img, .hw__case:focus-visible img { transform: scale(1.04); }
.hw__casetext { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: .25rem; padding: 3rem 1.5rem 1.5rem; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
/* Texten ligger på bilden: alltid vit, även där sajtens länkfärg annars gäller. */
.hw .hw__casetext, .hw .hw__casetext strong, .hw .hw__casetext span { color: #FFF; }
.hw__casetext strong { font-size: clamp(1.375rem, 2.4vw, 1.875rem); letter-spacing: -0.02em; }
.hw__casetext span { font-size: .9375rem; text-decoration: underline; text-underline-offset: .25em; }
.hw__steps { display: flex; flex-direction: column; gap: 1.25rem; }
.hw__steplist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: hw; }
.hw__steplist li { counter-increment: hw; display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.hw__steplist li::before { content: counter(hw, decimal-leading-zero); color: var(--stone-text); font-variant-numeric: tabular-nums; }
.hw__steplist strong { font-size: 1.1875rem; letter-spacing: -0.01em; }
.hw__steplist span { color: var(--graphite); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .hw__case img { transition: none; } }
@media (max-width: 860px) {
	.hw__series, .hw__box, .hw__mountgrid, .hw__steplist, .hw__cases, .hw__offer { grid-template-columns: minmax(0, 1fr); }
	.hw__photos { aspect-ratio: 4 / 3; }
	/* En ensam bild visas hel: väggbilden ska visa hela kåpan. */
	.hw__photos[data-count="1"] { aspect-ratio: auto; }
	.hw__shot { height: 320px; }
}

/* Support i plattan (support.php): appens supportsida, vanliga frågor och ärende. Måtten är appens dp-värden i
   plattans enhet (--d), färgerna appens egna för ljust och mörkt tema. Liten text har ett golv i px så att den går
   att läsa när plattan är smal. */
.sup { --su-ground: #F4F5F7; --su-card: #FFF; --su-ink: #15161A; --su-sec: #4B5060; --su-soft: #EEF1FF; --su-softtext: #22379E; --su-div: #E6E7EB; --su-border: #D5D8E0; --su-strong: #15161A; --su-accent: #2B4EF0; --su-error: #C62828; background: var(--su-ground); color: var(--su-ink); font-family: var(--sans); font-size: max(11px, calc(var(--d) * 16)); line-height: 1.3; }
.mpt__screen[data-theme="dark"] .sup { --su-ground: #0F1014; --su-card: #1C1D23; --su-ink: #F4F5F7; --su-sec: #A9ADBA; --su-soft: #232A52; --su-softtext: #C9D3FF; --su-div: #2A2C33; --su-border: #3A3D47; --su-strong: #2B2E3A; --su-accent: #9BB0FF; --su-error: #FF8A80; }
.sup svg { flex: none; width: calc(var(--d) * 22); height: calc(var(--d) * 22); }
.sup [hidden] { display: none; }
.sup button { color: inherit; }
.sup__header { flex: none; display: flex; align-items: center; gap: calc(var(--d) * 16); padding: calc(var(--d) * 20) calc(var(--d) * 24); border-bottom: max(1px, calc(var(--d) * 1)) solid var(--su-div); background: var(--su-card); }
.sup__backbtn { flex: none; display: grid; place-items: center; width: max(28px, calc(var(--d) * 48)); height: max(28px, calc(var(--d) * 48)); padding: 0; border: max(1px, calc(var(--d) * 1)) solid var(--su-div); border-radius: calc(var(--d) * 14); background: var(--su-card); cursor: pointer; }
.sup__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(14px, calc(var(--d) * 26)); font-weight: 700; }
.sup__pill { flex: none; padding: calc(var(--d) * 10) calc(var(--d) * 16); border-radius: 999px; background: var(--su-soft); color: var(--su-softtext); font-size: max(10px, calc(var(--d) * 15)); }
.sup__scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; padding-bottom: calc(var(--d) * 48); }
.sup__scroll > * { flex: none; }
.sup__hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; min-height: calc(var(--d) * 340); box-sizing: border-box; padding: calc(var(--d) * 48) calc(var(--d) * 24) calc(var(--d) * 52); background: #0C0D12; color: #FFF; }
.sup__hero > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.sup__eyebrow { font-size: max(10px, calc(var(--d) * 15)); letter-spacing: .13em; text-transform: uppercase; color: #C9D3FF; }
.sup__herotitle { max-width: calc(var(--d) * 760); margin-top: calc(var(--d) * 18); font-size: max(20px, calc(var(--d) * 44)); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.sup__search { position: relative; display: block; align-self: stretch; margin-top: calc(var(--d) * 22); color: var(--su-sec); }
.sup__search--page { margin: calc(var(--d) * 32) calc(var(--d) * 24) 0; }
.sup__search svg { position: absolute; left: calc(var(--d) * 22); top: 50%; width: calc(var(--d) * 24); height: calc(var(--d) * 24); transform: translateY(-50%); pointer-events: none; }
/* Minst 16 px i fältet: annars zoomar iOS in sidan när fältet får fokus. */
.sup__search input { box-sizing: border-box; width: 100%; height: max(40px, calc(var(--d) * 68)); margin: 0; padding: 0 calc(var(--d) * 16) 0 calc(var(--d) * 60); border: max(1px, calc(var(--d) * 1)) solid var(--su-border); border-radius: calc(var(--d) * 18); background: var(--su-card); color: var(--su-ink); font: inherit; font-size: max(16px, calc(var(--d) * 20)); text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.sup__search input::placeholder { color: var(--su-sec); opacity: 1; }
.sup__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sup__search input:focus-visible { border-color: #9BB0FF; outline: max(2px, calc(var(--d) * 3)) solid #9BB0FF; outline-offset: 0; }
/* Mot den ljusa sidan syns inte hjältens ljusblå ring: där används accentfärgen. */
.sup__search--page input:focus-visible { border-color: var(--su-accent); outline-color: var(--su-accent); }
.sup__chips { display: flex; flex-wrap: wrap; gap: calc(var(--d) * 10); margin-top: calc(var(--d) * 18); }
.sup__chip { min-height: max(28px, calc(var(--d) * 48)); padding: 0 calc(var(--d) * 18); border: max(1px, calc(var(--d) * 1)) solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(15, 16, 20, .35); font-size: max(11px, calc(var(--d) * 15)); cursor: pointer; }
.sup__chip:hover { background: rgba(15, 16, 20, .6); }
.sup__results { position: relative; z-index: 1; display: flex; flex-direction: column; margin: calc(var(--d) * -28) calc(var(--d) * 24) 0; border-radius: calc(var(--d) * 22); background: var(--su-card); box-shadow: 0 calc(var(--d) * 10) calc(var(--d) * 30) rgba(0, 0, 0, .18); overflow: hidden; }
.sup__resultlabel { padding: calc(var(--d) * 18) calc(var(--d) * 22); font-size: max(10px, calc(var(--d) * 15)); color: var(--su-sec); }
.sup__resultfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--d) * 14); padding: calc(var(--d) * 22); border-top: max(1px, calc(var(--d) * 1)) solid var(--su-div); font-size: max(11px, calc(var(--d) * 17)); }
.sup__qrow { display: flex; align-items: center; gap: calc(var(--d) * 14); width: 100%; min-height: max(32px, calc(var(--d) * 64)); padding: calc(var(--d) * 16) calc(var(--d) * 22); border: 0; border-top: max(1px, calc(var(--d) * 1)) solid var(--su-div); background: transparent; font-size: max(12px, calc(var(--d) * 18)); text-align: left; cursor: pointer; }
.sup__qrow svg { width: calc(var(--d) * 20); height: calc(var(--d) * 20); color: var(--su-accent); }
.sup__qtext { flex: 1; display: flex; flex-direction: column; gap: calc(var(--d) * 4); }
.sup__qcat { font-size: max(10px, calc(var(--d) * 15)); color: var(--su-sec); }
.sup__actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--d) * 20); margin: calc(var(--d) * 32) calc(var(--d) * 24) 0; }
.sup__action { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--d) * 10); min-height: calc(var(--d) * 190); box-sizing: border-box; padding: calc(var(--d) * 26); border: 0; border-radius: calc(var(--d) * 22); background: var(--su-card); font-size: max(11px, calc(var(--d) * 16)); line-height: 1.25; text-align: left; }
.sup__action svg { width: calc(var(--d) * 32); height: calc(var(--d) * 32); color: var(--su-accent); }
.sup__action strong { font-size: max(14px, calc(var(--d) * 26)); }
.sup .sup__action--ticket { background: var(--su-strong); color: #FFF; cursor: pointer; }
.sup__action--ticket svg { color: #9BB0FF; }
.sup__action--ticket span { color: #C8CAD2; }
.sup__phone { font-size: max(13px, calc(var(--d) * 22)); font-weight: 700; letter-spacing: .02em; }
.sup__mailhint, .sup__muted { font-size: max(10px, calc(var(--d) * 15)); line-height: 1.3; color: var(--su-sec); }
.sup__h { margin: calc(var(--d) * 44) calc(var(--d) * 24) calc(var(--d) * 18); font-size: max(16px, calc(var(--d) * 32)); font-weight: 700; }
.sup__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--d) * 20); margin: 0 calc(var(--d) * 24); }
.sup .sup__tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; height: calc(var(--d) * 240); padding: 0; border: 0; border-radius: calc(var(--d) * 22); overflow: hidden; background: #0C0D12; color: #FFF; text-align: left; }
button.sup__tile { cursor: pointer; }
.sup__tile > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.sup__tiletext { display: flex; flex-direction: column; gap: calc(var(--d) * 4); padding: calc(var(--d) * 18) calc(var(--d) * 20); background: rgba(12, 13, 18, .78); }
.sup__tiletext strong { font-size: max(12px, calc(var(--d) * 22)); }
.sup__tiletext span { font-size: max(10px, calc(var(--d) * 15)); color: #D5D7DE; }
.sup__tiletext strong, .sup__tiletext span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sup__card { display: flex; flex-direction: column; margin: calc(var(--d) * 44) calc(var(--d) * 24) 0; border-radius: calc(var(--d) * 22); background: var(--su-card); overflow: hidden; }
.sup__card + .sup__card { margin-top: calc(var(--d) * 20); }
.sup__card--pad { gap: calc(var(--d) * 12); padding: calc(var(--d) * 22) calc(var(--d) * 24); }
.sup__cardhead { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--d) * 12); padding: calc(var(--d) * 10) calc(var(--d) * 22); }
.sup__cardhead strong { font-size: max(14px, calc(var(--d) * 26)); }
.sup__textbtn { min-height: max(28px, calc(var(--d) * 48)); padding: 0; border: 0; background: none; font-size: max(11px, calc(var(--d) * 16)); font-weight: 700; cursor: pointer; }
.sup .sup__textbtn { color: var(--su-accent); }
.sup__cardtitle { font-size: max(13px, calc(var(--d) * 22)); }
.sup__fact { display: flex; justify-content: space-between; gap: calc(var(--d) * 16); color: var(--su-sec); }
.sup__fact strong { color: var(--su-ink); text-align: right; }
.sup__buttons { display: flex; flex-wrap: wrap; gap: calc(var(--d) * 10); margin-top: calc(var(--d) * 8); }
.sup__card--pad .sup__btn { flex: 1; }
.sup__btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: max(30px, calc(var(--d) * 52)); padding: calc(var(--d) * 6) calc(var(--d) * 24); border: max(1px, calc(var(--d) * 1)) solid transparent; border-radius: calc(var(--d) * 14); font-size: max(11px, calc(var(--d) * 16)); font-weight: 700; text-align: center; cursor: pointer; }
.sup .sup__btn--primary { border-radius: calc(var(--d) * 16); background: #2B4EF0; color: #FFF; }
.sup .sup__btn--strong { background: var(--su-strong); color: #FFF; }
.sup__btn--outline { border-color: var(--su-border); background: var(--su-card); }
.sup__btn--static { cursor: default; }
/* Kategorierna får inte plats på bredden: raden rullas i sidled, med en synlig rullningslist som rutornas rader. */
.sup__cats { display: flex; gap: calc(var(--d) * 12); margin-top: calc(var(--d) * 24); padding: 0 calc(var(--d) * 24) calc(var(--d) * 4); overflow-x: auto; scrollbar-width: thin; }
.sup__cat { flex: none; display: flex; align-items: center; gap: calc(var(--d) * 12); padding: calc(var(--d) * 10) calc(var(--d) * 18) calc(var(--d) * 10) calc(var(--d) * 10); border: max(2px, calc(var(--d) * 2)) solid transparent; border-radius: calc(var(--d) * 18); background: var(--su-card); text-align: left; cursor: pointer; }
.sup__cat[aria-pressed="true"] { border-color: var(--su-accent); }
.sup__cat img { width: calc(var(--d) * 64); height: calc(var(--d) * 64); border-radius: calc(var(--d) * 12); object-fit: cover; }
.sup__cattext { display: flex; flex-direction: column; gap: calc(var(--d) * 2); font-size: max(11px, calc(var(--d) * 17)); white-space: nowrap; }
.sup__catcount { font-size: max(10px, calc(var(--d) * 14)); color: var(--su-sec); }
.sup__summary { margin: calc(var(--d) * 24) calc(var(--d) * 24) calc(var(--d) * 16); color: var(--su-sec); }
.sup__list { display: flex; flex-direction: column; margin: 0 calc(var(--d) * 24); border-radius: calc(var(--d) * 22); background: var(--su-card); overflow: hidden; }
/* Linjen mellan frågorna är en skugga uppåt: den första synliga frågans linje klipps bort av kortet. */
.sup__faq { box-shadow: 0 calc(-1 * max(1px, calc(var(--d) * 1))) 0 var(--su-div); }
.sup__toggle { display: flex; align-items: center; gap: calc(var(--d) * 16); width: 100%; min-height: max(32px, calc(var(--d) * 64)); padding: calc(var(--d) * 18) calc(var(--d) * 24); border: 0; background: transparent; font-size: max(12px, calc(var(--d) * 19)); font-weight: 700; text-align: left; cursor: pointer; }
.sup__toggle > :first-child { flex: 1; }
.sup__plus { flex: none; display: grid; place-items: center; width: max(22px, calc(var(--d) * 36)); height: max(22px, calc(var(--d) * 36)); border-radius: 50%; background: var(--su-soft); color: var(--su-softtext); font-size: max(13px, calc(var(--d) * 22)); line-height: 1; }
.sup__plus::before { content: "+"; }
.sup__toggle[aria-expanded="true"] .sup__plus::before { content: "−"; }
.sup__answer { display: flex; flex-direction: column; gap: calc(var(--d) * 6); max-width: calc(var(--d) * 720); padding: 0 calc(var(--d) * 24) calc(var(--d) * 22); font-size: max(12px, calc(var(--d) * 18)); line-height: 1.35; }
.sup__helped { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--d) * 12); margin-top: calc(var(--d) * 10); }
.sup__helped .sup__btn { min-height: max(28px, calc(var(--d) * 48)); }
.sup__none { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--d) * 12); padding: calc(var(--d) * 40) calc(var(--d) * 24); }
.sup__none strong { font-size: max(14px, calc(var(--d) * 24)); }
.sup__toast { position: absolute; left: 50%; bottom: calc(var(--d) * 40); max-width: 86%; padding: calc(var(--d) * 14) calc(var(--d) * 22); border-radius: 999px; background: #15161A; color: #FFF; font-size: max(11px, calc(var(--d) * 15)); transform: translateX(-50%); transition: opacity .2s; }
.sup__toast:empty { opacity: 0; pointer-events: none; }
.sup__form { display: flex; flex-direction: column; gap: calc(var(--d) * 26); margin: calc(var(--d) * 24) calc(var(--d) * 24) 0; padding: calc(var(--d) * 32); border-radius: calc(var(--d) * 22); background: var(--su-card); }
.sup__block { display: flex; flex-direction: column; gap: calc(var(--d) * 8); min-width: 0; }
.sup__label { font-size: max(11px, calc(var(--d) * 16)); }
.sup__picks { display: flex; flex-wrap: wrap; gap: calc(var(--d) * 12); }
.sup__pick { min-height: max(30px, calc(var(--d) * 56)); padding: calc(var(--d) * 6) calc(var(--d) * 20); border: max(2px, calc(var(--d) * 2)) solid var(--su-border); border-radius: calc(var(--d) * 14); background: var(--su-card); font-size: max(11px, calc(var(--d) * 17)); font-weight: 700; cursor: pointer; }
.sup .sup__pick[aria-pressed="true"] { border-color: var(--su-accent); background: var(--su-soft); color: var(--su-softtext); }
.sup__field { display: flex; align-items: center; box-sizing: border-box; min-height: max(30px, calc(var(--d) * 56)); padding: calc(var(--d) * 16) calc(var(--d) * 18); border: max(1px, calc(var(--d) * 1)) solid var(--su-border); border-radius: calc(var(--d) * 14); font-size: max(12px, calc(var(--d) * 18)); overflow-wrap: anywhere; }
.sup__field--area { align-items: flex-start; min-height: calc(var(--d) * 150); }
.sup__help { font-size: max(10px, calc(var(--d) * 14)); color: var(--su-sec); }
.sup__error { font-size: max(10px, calc(var(--d) * 14)); color: var(--su-error); }
.sup__pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--d) * 18); }
.sup__send { align-self: flex-start; min-height: max(32px, calc(var(--d) * 60)); padding-inline: calc(var(--d) * 34); font-size: max(12px, calc(var(--d) * 19)); }
.sup__side { display: flex; flex-direction: column; gap: calc(var(--d) * 20); margin: calc(var(--d) * 20) calc(var(--d) * 24) 0; }
.sup__auto { display: flex; flex-direction: column; gap: calc(var(--d) * 8); padding: calc(var(--d) * 26); border-radius: calc(var(--d) * 22); background: var(--su-strong); color: #C8CAD2; }
.sup__auto strong { font-size: max(12px, calc(var(--d) * 20)); color: #FFF; }
.sup__mail { display: flex; align-items: center; gap: calc(var(--d) * 20); padding: calc(var(--d) * 26); border-radius: calc(var(--d) * 22); background: var(--su-card); }
.sup__qr { flex: none; box-sizing: border-box; width: calc(var(--d) * 112); height: calc(var(--d) * 112); padding: calc(var(--d) * 8); border-radius: calc(var(--d) * 12); background: #FFF; }
.sup__mailtext { display: flex; flex-direction: column; gap: calc(var(--d) * 6); }
.sup__mailtext strong { font-size: max(12px, calc(var(--d) * 19)); }
.sup__urgent { padding: calc(var(--d) * 22) calc(var(--d) * 26); border-radius: calc(var(--d) * 22); background: var(--su-card); color: var(--su-sec); }
.sup__receipt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--d) * 16); margin: calc(var(--d) * 24); padding: calc(var(--d) * 48) calc(var(--d) * 40); border-radius: calc(var(--d) * 22); background: var(--su-card); }
.sup__check { display: grid; place-items: center; width: calc(var(--d) * 72); height: calc(var(--d) * 72); border-radius: 50%; background: #E3F5EA; color: #1E7A47; }
.sup__check svg { width: calc(var(--d) * 36); height: calc(var(--d) * 36); }
.sup__receipt strong { font-size: max(16px, calc(var(--d) * 36)); line-height: 1.15; }
.sup__receipttext { font-size: max(12px, calc(var(--d) * 19)); }
@media (prefers-reduced-motion: reduce) { .sup__toast { transition: none; } }
@supports not (width: 1cqw) { .mpt { display: none; } .mp__example { grid-template-columns: minmax(0, 1fr); } }
/* En kolumn: förklaringen ligger ovanför plattan, så att den syns när besökaren trycker på en ruta. */
@media (max-width: 900px) { .mp__example { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .mpt { max-width: 420px; margin-inline: auto; } .mp__panel { display: contents; } .mp__explain { order: -1; } }
@media (prefers-reduced-motion: reduce) { .mpt__slide { animation: none; } .mpt__slide:nth-of-type(2) { opacity: 1; } }

/* ---------- Konfigurator ---------- */
/* Dold sida /konfigurator. Steg till vänster, "Ditt förslag" till höger (ovanför stegen på mobil).
   site.js sätter .is-enhanced på roten, .is-active på aktuellt steg, aria-pressed på valen och ritar
   förhandsvisningen. Utan skript (ingen .is-enhanced) visas alla steg och formuläret under varandra. */
.configurator {
	--configurator-screen: #2F6B4A;
	--configurator-dark: #2A2A2A;
	--configurator-floor: #D9D1C3;
	--configurator-taupe: #A79C8B;
	--configurator-plant: #6F8F6A;
	--configurator-sky: #DCE6EA;
	--configurator-tape: #C8102E;
	--configurator-ok: #EAF5EE;
	--configurator-ok-line: #CBE6D5;
	--configurator-warn: #FFF7E6;
	--configurator-warn-line: #F0DFAE;
	box-sizing: border-box;
	max-width: calc(var(--max) + 2 * var(--gutter));
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--section);
}
.configurator [hidden] { display: none !important; }
.configurator__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2rem; }
.configurator__head .eyebrow { margin-bottom: 1rem; }
.configurator__lead { max-width: 26rem; font-size: 1rem; }
.configurator__shell { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.configurator__main, .configurator__summary { min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.configurator__main { padding: 32px; }

/* Stegräknare och steg */
.configurator__stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: .8125rem; color: var(--stone-text); }
.configurator__dots { display: flex; flex: 1; gap: 6px; }
.configurator__dots span { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.configurator__dots span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-in-out); }
.configurator__dots span.is-on::after { transform: none; }
.configurator.is-enhanced .configurator__step:not(.is-active) { display: none; }
.configurator:not(.is-enhanced) .configurator__step + .configurator__step { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.configurator:not(.is-enhanced) .configurator__stepper,
.configurator:not(.is-enhanced) .configurator__nav { display: none; }
.configurator__unavailable { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--graphite); }
.configurator__unavailable a { color: var(--ink); font-weight: 600; text-underline-offset: .2em; }
/* Roten markeras redan i markupen; tills site.js har bundit den (data-bound) gör knapparna ingenting. */
.configurator.is-enhanced:not([data-bound]) .configurator__next { opacity: .3; pointer-events: none; }
.configurator.is-enhanced:not([data-bound]) .configurator__back { visibility: hidden; }
.configurator__step.is-active > * { animation: configurator-up .55s var(--ease) both; }
.configurator__step.is-active > :nth-child(2) { animation-delay: .05s; }
.configurator__step.is-active > :nth-child(3) { animation-delay: .1s; }
.configurator__step.is-active > :nth-child(4) { animation-delay: .15s; }
.configurator__title { margin: 0 0 .5rem; font-size: clamp(1.6rem, 2.6vw, 2.125rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; }
.configurator__sub { max-width: 34rem; margin: 0 0 1.5rem; line-height: 1.55; color: var(--graphite); }
.configurator__mini { margin: 12px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--stone-text); }

/* Valkort med illustration och bock */
.configurator__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.configurator__choice { position: relative; display: flex; flex-direction: column; padding: 12px 12px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: #FFF; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .35s var(--ease); }
.configurator__choice:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(17, 17, 17, .35); }
.configurator__choice[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.configurator__choice[aria-pressed="true"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat; animation: configurator-pop .35s var(--ease); }
.configurator__choice strong { display: block; margin: 12px 4px 2px; font-size: 1.02rem; }
.configurator__choice small { display: block; margin: 0 4px; font-size: .875rem; line-height: 1.4; color: var(--stone-text); }
.configurator__illu { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: 11px; background: var(--warm); overflow: hidden; }
.configurator__illu svg { display: block; width: 100%; height: 100%; }

/* Färger i illustrationerna och förhandsvisningen (klasser i stället för hårdkodade fill-värden) */
.configurator .fill-ink { fill: var(--ink); }
.configurator .fill-dark { fill: var(--configurator-dark); }
.configurator .fill-white { fill: #FFF; }
.configurator .fill-screen { fill: var(--configurator-screen); }
.configurator .fill-sand { fill: var(--sand); }
.configurator .fill-warm { fill: var(--warm); }
.configurator .fill-floor { fill: var(--configurator-floor); }
.configurator .fill-stone { fill: var(--stone); }
.configurator .fill-stone-text { fill: var(--stone-text); }
.configurator .fill-taupe { fill: var(--configurator-taupe); }
.configurator .fill-plant { fill: var(--configurator-plant); }
.configurator .fill-live { fill: var(--live-soft); }
.configurator .fill-sky { fill: var(--configurator-sky); }
.configurator .fill-success { fill: var(--configurator-ok); }
.configurator .stroke-ink { stroke: var(--ink); }
.configurator .stroke-stone { stroke: var(--stone); }
.configurator .stroke-tape { stroke: var(--configurator-tape); }
.configurator .stroke-green { stroke: var(--cta-green); }
.configurator__sky-top { stop-color: var(--configurator-sky); }
.configurator__sky-bottom { stop-color: var(--warm); }
.configurator__svg-text { font-family: var(--sans); font-weight: 600; }

/* Små loopar i illustrationerna. Grundläget är slutbilden, så att reducerad rörelse visar en hel bild. */
.configurator__scr { fill: var(--configurator-screen); animation: configurator-scr 4.5s infinite; }
.configurator__qr { opacity: 0; animation: configurator-qr 4.5s infinite; }
.configurator__camp { animation: configurator-camp 4.5s infinite; }
.configurator__plug { animation: configurator-plug 4.5s var(--ease) infinite; }
.configurator__sway { transform-box: fill-box; transform-origin: 50% 0; animation: configurator-sway 4s ease-in-out infinite; }
.configurator__drop { animation: configurator-drop 3.6s var(--ease) infinite; }
.configurator__rise { animation: configurator-rise 3.6s var(--ease) infinite; }
.configurator__rot { transform-box: fill-box; transform-origin: center; animation: configurator-rot 4s var(--ease-in-out) infinite; }
.configurator__tape-w { stroke-dasharray: 160; animation: configurator-tape-w 5s var(--ease) infinite; }
.configurator__tape-h { stroke-dasharray: 130; animation: configurator-tape-h 5s var(--ease) infinite; }
.configurator__label-w { animation: configurator-label-w 5s infinite; }
.configurator__label-h { animation: configurator-label-h 5s infinite; }
@keyframes configurator-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes configurator-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes configurator-fade { from { opacity: 0; transform: scale(.98); } }
@keyframes configurator-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes configurator-scr { 0%, 32% { fill: #1D1D1D; } 40%, 100% { fill: var(--configurator-screen); } }
@keyframes configurator-qr { 0%, 40% { opacity: 0; } 46%, 66% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes configurator-camp { 0%, 70% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes configurator-plug { 0%, 8% { transform: translateX(-30px); } 30%, 100% { transform: none; } }
@keyframes configurator-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes configurator-drop { 0% { opacity: 0; transform: translateY(-22px); } 28%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes configurator-rise { 0% { opacity: 0; transform: translateY(24px); } 28%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes configurator-rot { 0%, 35% { transform: rotate(0); } 50%, 85% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
@keyframes configurator-tape-w { 0%, 6% { stroke-dashoffset: 160; } 36%, 100% { stroke-dashoffset: 0; } }
@keyframes configurator-tape-h { 0%, 44% { stroke-dashoffset: 130; } 74%, 100% { stroke-dashoffset: 0; } }
@keyframes configurator-label-w { 0%, 32% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes configurator-label-h { 0%, 70% { opacity: 0; } 78%, 100% { opacity: 1; } }

/* Mätguide, mått och storlekar */
.configurator__guide { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 18px; padding: 16px; border-radius: 16px; background: var(--warm); }
.configurator__guide svg { display: block; width: 100%; height: auto; }
.configurator__guide-list { margin: 0; padding-left: 1.1rem; font-size: .9375rem; line-height: 1.6; color: var(--graphite); }
.configurator__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.configurator__measure { display: block; font-size: .8125rem; font-weight: 500; color: var(--graphite); }
.configurator__measure input { display: block; box-sizing: border-box; width: 100%; min-height: 48px; margin-top: 6px; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: #FFF; color: var(--ink); font: 1rem var(--sans); transition: border-color .2s; }
.configurator__measure input:focus { border-color: var(--ink); }
.configurator__rec { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--configurator-ok-line); border-radius: 12px; background: var(--configurator-ok); line-height: 1.5; animation: configurator-up .45s var(--ease); }
.configurator__rec:empty { display: none; }
.configurator__rec.is-warn { border-color: var(--configurator-warn-line); background: var(--configurator-warn); }
.configurator__sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.configurator__size { display: flex; flex-direction: column; align-items: center; padding: 12px 6px 10px; border: 1.5px solid var(--line); border-radius: 14px; background: #FFF; color: var(--ink); font: 600 1rem var(--sans); text-align: center; cursor: pointer; transition: opacity .3s, border-color .2s, box-shadow .2s, transform .3s var(--ease); }
.configurator__size:hover { transform: translateY(-2px); }
.configurator__size[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.configurator__size-frame { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 64px; margin-bottom: 8px; }
.configurator__size-bar { display: block; width: calc(var(--w, 60) * .36px); height: calc(var(--h, 100) * .36px); border-radius: 3px; background: var(--ink); transition: width .45s var(--ease-in-out), height .45s var(--ease-in-out); }
.configurator__size-tag { display: block; min-height: 1em; margin-top: 4px; font-size: .6875rem; letter-spacing: .04em; color: var(--stone-text); }
.configurator__size.is-fit .configurator__size-tag { color: var(--cta-green); }
.configurator__size.is-nofit { opacity: .38; }

/* Kåpans färg */
.configurator__swatches { display: flex; gap: 16px; }
.configurator__swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--graphite); font: 500 .875rem var(--sans); cursor: pointer; }
.configurator__swatch-dot { width: 64px; height: 64px; border: 1.5px solid var(--line); border-radius: 50%; transition: transform .3s var(--ease); }
.configurator__swatch--svart .configurator__swatch-dot { background: var(--ink); }
.configurator__swatch--vit .configurator__swatch-dot { background: #FFF; }
.configurator__swatch:hover .configurator__swatch-dot { transform: scale(1.06); }
.configurator__swatch[aria-pressed="true"] { color: var(--ink); }
.configurator__swatch[aria-pressed="true"] .configurator__swatch-dot { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Formuläret och tack */
.configurator__form { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.configurator__form a { color: var(--ink); }
.configurator__quote { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.configurator__thanks { padding: 30px 10px; text-align: center; }
.configurator__thanks svg { width: 72px; height: 72px; }
.configurator__thanks .configurator__sub { margin-inline: auto; }
.configurator__check { stroke-dasharray: 40; stroke-dashoffset: 0; animation: configurator-draw .6s .2s var(--ease) both; }

/* Navigering */
.configurator__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.configurator__back { padding-left: 0; border-color: transparent; background: transparent; color: var(--ink); }
.configurator__next { margin-left: auto; }
.configurator__next:disabled { opacity: .3; cursor: default; transform: none; }

/* Ditt förslag */
.configurator__summary { position: sticky; top: 1.5rem; overflow: hidden; }
.configurator__stage { position: relative; height: 250px; background: linear-gradient(180deg, var(--warm), var(--sand)); }
.configurator__stage svg { display: block; width: 100%; height: 100%; }
.configurator__scene { animation: configurator-fade .5s var(--ease); }
.configurator__summary-body { padding: 22px 24px 26px; }
.configurator__summary-title { margin: 0 0 .8rem; font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); }
.configurator__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: .9375rem; }
.configurator__list dt { color: var(--stone-text); }
.configurator__list dd { margin: 0; font-weight: 500; text-align: right; }
.configurator__pricing { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.configurator__period { position: relative; display: grid; grid-template-columns: repeat(var(--period-count, 4), minmax(0, 1fr)); margin-bottom: 16px; padding: 4px; border-radius: 999px; background: var(--warm); }
.configurator__period button { position: relative; z-index: 1; min-height: 40px; padding: .55rem 0; border: 0; border-radius: 999px; background: transparent; color: var(--graphite); font: 500 .8125rem var(--sans); cursor: pointer; transition: color .25s; }
.configurator__period button[aria-checked="true"] { color: var(--ink); }
.configurator__period-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--period-count, 4)); border-radius: 999px; background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); transform: translateX(calc(var(--period-index, 2) * 100%)); transition: transform .4s var(--ease-in-out); }
.configurator__amount { margin: 0; font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.configurator__amount small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--graphite); }
.configurator__muted { margin: 6px 0 0; font-size: .875rem; color: var(--stone-text); }
.configurator__price > .configurator__mini:first-child { margin-top: 0; }
.configurator__line { display: flex; justify-content: space-between; gap: 1rem; margin-top: 14px; font-size: .875rem; }
.configurator__line span:first-child { color: var(--graphite); }

@media (max-width: 960px) {
	.configurator__shell { grid-template-columns: minmax(0, 1fr); }
	.configurator__summary { position: static; order: -1; }
}
@media (max-width: 620px) {
	.configurator__guide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.configurator { padding-inline: 16px; }
	.configurator__main { padding: 20px; }
	.configurator__stage { height: 210px; }
	.configurator__summary-body { padding: 18px 20px 22px; }
}
@media (max-width: 520px) {
	.configurator__fields { grid-template-columns: minmax(0, 1fr); }
	.configurator__sizes { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.configurator *, .configurator *::before, .configurator *::after { animation: none !important; transition: none !important; }
	.configurator__choice:hover, .configurator__size:hover, .configurator__swatch:hover .configurator__swatch-dot { transform: none; }
}