:root {
  --paper: #ffffff;
  --soft: #f8f7f4;
  --soft-green: #eef4f0;
  --soft-rose: #f7eff1;
  --soft-gold: #f7f2e7;
  --ink: #242424;
  --muted: #686868;
  --line: #e7e6e2;
  --heeling-green: #557768;
  --heeling-rose: #986876;
}

* { box-sizing: border-box; }
html { color: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Open Sans", sans-serif; font-weight: 300; line-height: 1.72; }
body p,
body .thin,
body .light,
body .regular { color: var(--ink); font-family: "Open Sans", sans-serif; font-size: 1.02rem; font-weight: 300; line-height: 1.72; }
body h1,
body h2,
body h3,
body h4 { color: var(--ink); font-family: "IM Fell Double Pica", serif; font-weight: 400; line-height: 1.08; }
button, a { font: inherit; }
a { color: var(--ink); }

.ecosystem-header { position: relative; z-index: 1000; border-bottom: 1px solid var(--line); color: var(--ink); background: var(--paper); }
.ecosystem-header-inner { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 44px; align-items: center; width: min(1260px, 100%); margin: 0 auto; padding: 24px 6.5%; }
.ecosystem-brand { display: flex; align-items: center; gap: 13px; font-size: .68rem; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
.ecosystem-brand a,
.ecosystem-brand img { display: block; }
.ecosystem-brand img { width: 58px; height: 58px; object-fit: cover; }
.ecosystem-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.ecosystem-nav a { color: inherit; text-decoration: none; }
.ecosystem-nav a:hover,
.ecosystem-nav a:focus-visible,
.ecosystem-nav .current { text-decoration: underline; text-underline-offset: 5px; }
.ecosystem-nav .current { text-decoration-thickness: 2px; }
.ecosystem-menu-button { display: none; width: 42px; height: 42px; padding: 9px; border: 0; color: var(--ink); background: transparent; }
.ecosystem-hamburger { display: grid; width: 23px; gap: 5px; }
.ecosystem-hamburger span { display: block; width: 100%; height: 1.5px; background: currentColor; }

.product-hero { background: var(--paper); }
.product-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr); gap: clamp(54px, 8vw, 104px); align-items: center; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 86px 0 92px; }
.product-identity { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 24px; align-items: center; }
.product-icon { display: block; width: 100px; height: 100px; border-radius: 22px; object-fit: cover; }
.eyebrow { margin: 0 0 10px; color: var(--muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.product-identity h1 { margin: 0; font-size: clamp(2.8rem, 5vw, 4.25rem); }
.product-subtitle { margin: 8px 0 0; color: var(--muted); font-size: .95rem; }
.product-description { margin-top: 48px; }
.product-description h2 { max-width: 650px; margin: 0 0 22px; font-size: clamp(2rem, 3.5vw, 3.15rem); }
.product-intro { max-width: 650px; margin: 0; color: #4d4d4d; font-size: 1.08rem; }
.store-links { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.store-links a,
.store-links img { display: block; }
.store-links img { width: 150px; height: auto; }
.product-hero-media { display: grid; place-items: center; }
.product-hero-media img { display: block; width: min(285px, 100%); max-height: 590px; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(35, 34, 32, .13)); }
.product-hero-media .hero-phone {
  width: min(250px, 100%);
  max-height: none;
  border: 3px solid #555;
  border-radius: 34px;
  background: #ffffff;
  object-fit: cover;
  box-shadow: 0 18px 38px rgba(35, 34, 32, .14);
  filter: none;
}

/* De ursprungliga färgerna finns kvar som milda Heeling-accenter. */
.gron_bakgrund,
.morkrod_bakgrund,
.ljusrod_bakgrund { background: var(--soft) !important; }
.vit_bakgrund { background: var(--paper) !important; }
.vit { color: var(--ink) !important; }
.morkrod { color: var(--heeling-green) !important; }
.ljusrod { color: var(--heeling-rose) !important; }
.svart { color: var(--muted) !important; }

.app-intro-art { max-width: 1040px; padding-top: 78px; padding-bottom: 82px; border-top: 1px solid var(--line); }
.app-intro-art h1 { margin-bottom: 44px; font-size: clamp(2.3rem, 4vw, 3.7rem) !important; }
.app-intro-art .row:last-child { align-items: center; }
.app-intro-art img[src*="gulboll"] { width: min(150px, 80%); }
.app-intro-art img[src*="Svangar"] { display: block; max-width: 290px; margin: 30px auto 0; }
.app-intro-art img[src*="Siluett"] { display: block; max-width: 250px; margin: 0 auto; }

.getting-started-section,
.customizing-section,
.command-list-section,
.stewards-section { margin-top: 0 !important; padding: 78px max(24px, calc((100% - 1080px) / 2)) 88px; border-top: 1px solid var(--line); }

.getting-started-section h1,
.customizing-section h1,
.command-list-section h1,
.stewards-section h1 { color: var(--ink) !important; font-size: clamp(2rem, 4vw, 3.2rem) !important; }

.getting-started-section > .row:first-child { max-width: 820px; margin: 0 auto 42px; }
.getting-started-section > .row:nth-child(2) { justify-content: center; align-items: center; }
.getting-started-section img[src*="startskarm"] { display: block; max-width: 230px; margin: 0 auto; }
.getting-started-section img[src*="Lyssnaknapp"] { display: block; max-width: 190px; margin: 0 auto 18px; }

.embed-responsive { max-width: 720px; margin-right: auto; margin-left: auto; }
.embed-responsive video { border-radius: 24px; background: #111; box-shadow: 0 18px 42px rgba(24,23,22,.13); }

.program-sources,
.make-program-section,
.personalize-section { margin-top: 0 !important; padding: 84px max(24px, calc((100% - 1080px) / 2)); border-top: 1px solid var(--line); }
.program-sources > .row:first-child h1,
.personalize-section > .row:first-child h1 { margin: 0 0 46px; font-size: clamp(2.2rem, 4vw, 3.5rem) !important; }
.program-sources > .row:last-child { gap: 28px; }
.program-sources > .row:last-child > div { padding: 34px; background: var(--soft); border: 1px solid var(--line); }
.program-sources > .row:last-child h1 { font-size: 2.25rem !important; }
.program-sources > .row:last-child > div > img { display: block; max-width: 240px; margin: 0 auto 28px; }
.program-sources img[src*="SarahYou"] { display: inline-block; max-width: 74px; }

.customizing-section img { max-width: 100%; height: auto; }
.customizing-section img[src*="klassskyltar"] { display: block; max-width: 230px; margin: 0 auto; }
.customizing-section img[src*="BackStor"] { display: block; max-width: 135px; margin: 20px auto; }
.customizing-section > .row:nth-child(3) { align-items: center; }
.customizing-section > .row:nth-child(3) > div:last-child { max-width: 760px; }
.customizing-section > .row:nth-child(3) > div:last-child > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.customizing-section > .row:nth-child(3) > div:last-child > div img { width: auto; height: 42px; }

.make-program-section > .row:first-child { align-items: center; }
.make-program-section h1 { font-size: clamp(2rem, 4vw, 3.2rem) !important; }
.make-program-section img[src*="editprogram"] { display: block; max-width: 180px; margin: 0 auto; float: none !important; }
.make-program-section img[src*="dragmoment"] { display: block; max-width: 620px; margin: 34px auto; }

.command-list-section > .row { max-width: 1040px; margin-right: auto; margin-left: auto; }
.command-list-section > .row:first-child { justify-content: center; margin-top: 0 !important; }
.command-list-section > .row:first-child h1 { margin: 0 0 24px; }
.command-list-section > .row:nth-child(2) {
  display: grid;
  grid-template-columns: minmax(170px, 210px) repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.command-list-section > .row:nth-child(2) > div {
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}
.command-list-section img[src*="Listofcommands"] { display: block; width: 100%; max-width: 200px; margin: 0 auto; }
.command-list-section p { display: flex; align-items: center; gap: 14px; }
.command-list-section p img { flex: 0 0 auto; width: 56px !important; padding: 0; }

.personalize-section > .row:last-child { align-items: center; }
.personalize-section img[src*="pil_makeprogra"] { display: block; max-width: 170px; margin: 0 auto; }
.personalize-section img[src*="hundiconer"] { display: block; max-width: 340px; margin: 28px auto; float: none !important; }
.personalize-section img[src*="BC-gul"] { display: block; max-width: 250px; margin: 0 auto; }

.stewards-section > .row { max-width: 1080px; margin-right: auto; margin-left: auto; }
.stewards-section > .row:nth-child(2) { align-items: start; gap: 0; }
.stewards-section > .row:nth-child(2) > div { padding: 34px; }
.stewards-section img[src*="RealVoices"],
.stewards-section img[src*="Robotvoices"] { display: block; max-width: 360px; margin: 0 auto; }
.stewards-section img[src*="onboard"] { display: block; max-width: 300px; margin: 28px auto 0; }
.stewards-section > div.mt-5 { max-width: 900px; margin: 54px auto 30px !important; }
.stewards-section > div.mt-5 h1 { font-size: 2rem !important; }

.related-tools { min-height: 0; padding: 104px 24px 118px; border-top: 1px solid var(--line); background: var(--paper); }
.related-tools-inner { width: min(1120px, 100%); margin: 0 auto; }
.related-tools h2 { max-width: 720px; margin: 0 0 48px; font-size: clamp(2rem, 4vw, 3.4rem); }
.related-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.related-apps article { display: flex; min-height: 100%; padding: 30px; flex-direction: column; background: var(--soft); border: 1px solid var(--line); }
.related-apps article > img { display: block; width: 150px; height: 150px; margin: 4px auto 30px; border-radius: 32px; object-fit: contain; box-shadow: 0 12px 30px rgba(24,23,22,.11); }
.related-apps article > div { display: flex; flex: 1; flex-direction: column; }
.related-apps h3 { margin: 0 0 14px; font-size: 1.65rem; }
.related-apps p { margin: 0 0 24px; font-size: .96rem; }
.related-apps a { margin-top: auto; color: var(--ink); }

.ecosystem-footer { padding: 30px 24px; border-top: 1px solid var(--line); color: var(--ink); background: var(--paper); text-align: center; font-size: .85rem; }
.ecosystem-footer p { margin: 0; font-size: inherit; }
.ecosystem-footer a { color: var(--ink); }

@media (max-width: 767px) {
  .ecosystem-header-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; padding: 16px 18px; }
  .ecosystem-brand { gap: 10px; max-width: 210px; font-size: .58rem; }
  .ecosystem-brand img { width: 44px; height: 44px; }
  .ecosystem-menu-button { display: grid; flex: 0 0 auto; place-items: center; }
  .ecosystem-nav { display: none; flex: 1 0 100%; padding-top: 8px; font-size: .84rem; text-transform: none; }
  .ecosystem-nav.is-open { display: grid; }
  .ecosystem-nav a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ecosystem-nav a:last-child { border-bottom: 0; }

  .product-hero-grid { display: block; width: calc(100% - 44px); padding: 58px 0 66px; }
  .product-identity { grid-template-columns: 76px minmax(0, 1fr); gap: 17px; }
  .product-icon { width: 76px; height: 76px; border-radius: 17px; }
  .product-identity h1 { font-size: 2.65rem; }
  .product-subtitle { font-size: .88rem; }
  .product-description { margin-top: 44px; }
  .product-description h2 { font-size: 2.15rem; }
  .product-intro { font-size: 1rem; }
  .store-links img { width: 145px; }
  .product-hero-media { margin-top: 48px; }
  .product-hero-media img { width: min(220px, 72vw); }
  .product-hero-media .hero-phone { width: min(210px, 68vw); border-radius: 29px; }

  .app-intro-art { padding: 58px 22px 64px; }
  .app-intro-art h1 { margin-bottom: 28px; font-size: 2.25rem !important; }
  .app-intro-art .row:last-child { justify-content: center; }
  .app-intro-art .row:last-child > div { width: 100%; max-width: 100%; }
  .app-intro-art img[src*="gulboll"] { width: 82px; }
  .app-intro-art img[src*="Svangar"] { max-width: 230px; }
  .app-intro-art img[src*="Siluett"] { max-width: 180px; margin-top: 30px; }

  .getting-started-section,
  .customizing-section,
  .command-list-section,
  .stewards-section,
  .program-sources,
  .make-program-section,
  .personalize-section { padding: 60px 22px 68px; }

  .getting-started-section > .row:nth-child(2) > div:first-child { display: none; }
  .getting-started-section > .row:nth-child(2) > div { width: 50%; max-width: 50%; }
  .getting-started-section img[src*="startskarm"] { max-width: 165px; }
  .getting-started-section img[src*="Lyssnaknapp"] { max-width: 145px; }
  .embed-responsive { margin-top: 40px; }

  .program-sources > .row:last-child { display: block; }
  .program-sources > .row:last-child > div { max-width: 100%; margin: 0 0 18px !important; padding: 24px; }
  .program-sources > .row:last-child h1 { font-size: 2rem !important; }

  .customizing-section > .row:nth-child(2) > div:first-child { display: none; }
  .customizing-section > .row:nth-child(2) { align-items: center; }
  .customizing-section > .row:nth-child(3) > div:first-child { display: none; }
  .customizing-section > .row:nth-child(3) > div:last-child { width: 100%; max-width: 100%; }

  .make-program-section > .row:first-child > div { width: 100%; max-width: 100%; }
  .make-program-section h1 { text-align: left !important; }
  .make-program-section img[src*="editprogram"] { max-width: 135px; margin-bottom: 28px; }

  .command-list-section > .row:nth-child(2) { display: block; }
  .command-list-section > .row:nth-child(2) > div { width: 100%; max-width: 100%; margin-bottom: 24px !important; }
  .command-list-section img[src*="Listofcommands"] { max-width: 170px; margin-bottom: 30px; }

  .personalize-section > .row:last-child > div { width: 100%; max-width: 100%; }
  .personalize-section img[src*="pil_makeprogra"] { display: none; }
  .personalize-section img[src*="BC-gul"] { max-width: 190px; }

  .stewards-section > .row:nth-child(2) { display: block; }
  .stewards-section > .row:nth-child(2) > div { width: 100%; max-width: 100%; padding: 22px 0; }
  .stewards-section img[src*="RealVoices"],
  .stewards-section img[src*="Robotvoices"] { max-width: 280px; }

  .related-tools { padding: 68px 22px 74px; }
  .related-tools h2 { margin-bottom: 34px; font-size: 2.15rem; }
  .related-apps { grid-template-columns: 1fr; gap: 16px; }
  .related-apps article { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 18px; padding: 21px; }
  .related-apps article > img { width: 82px; height: 82px; margin: 0; border-radius: 18px; }
  .related-apps h3 { font-size: 1.35rem; }
  .related-apps p { margin-bottom: 8px; font-size: .88rem; line-height: 1.55; }
  .related-apps a { font-size: .86rem; }
  .ecosystem-footer { padding: 28px 22px; font-size: .8rem; }
}