#lp-app, #lp-app * { box-sizing: border-box; }
#lp-app { font-family: Inter, Helvetica, Arial, sans-serif; color: #0F2A2A; background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
#lp-app a { color: #0F2A2A; text-decoration: none; }
#lp-app a:hover { color: #0B5C46; }
#lp-app ::selection { background: #B8F27B; color: #0F2A2A; }
#lp-app button { font-family: Inter, Helvetica, Arial, sans-serif; }
#lp-app input { font-family: Inter, Helvetica, Arial, sans-serif; }
#lp-app :focus-visible { outline: 3px solid #0B5C46; outline-offset: 2px; }

#lp-app .wrap { max-width: 1280px; margin: 0 auto; }
#lp-app .sec { padding: 0 32px 96px; }

/* rubriker */
#lp-app .h1 { font-family: Poppins, sans-serif; font-weight: 700; letter-spacing: -0.035em; margin: 0 0 14px; font-size: 48px; line-height: 1.06; text-wrap: pretty; }
#lp-app .h1-hero { font-size: 68px; line-height: 1.02; margin: 0 0 22px; }
#lp-app .h2 { font-family: Poppins, sans-serif; font-weight: 700; font-size: 40px; letter-spacing: -0.03em; margin: 0 0 14px; line-height: 1.1; }
#lp-app .h2-sm { font-size: 34px; }
#lp-app .h3 { font-family: Poppins, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.025em; margin: 0; }
#lp-app .lead { font-size: 17.5px; line-height: 1.6; color: #4C5C57; margin: 0 0 34px; max-width: 640px; }

/* rutnät */
#lp-app .g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
#lp-app .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#lp-app .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
#lp-app .gsplit { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
#lp-app .gsplit-b { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; }
#lp-app .gsplit-c { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
#lp-app .gsplit-d { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: start; }
#lp-app .gsplit-e { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: start; }
#lp-app .gsplit-f { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }
#lp-app .gsplit-g { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: start; }
#lp-app .gopt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#lp-app .gopt4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#lp-app .gaddr { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }

/* hover-tillstånd */
#lp-app .lime { background: #B8F27B; color: #0F2A2A; }
#lp-app .lime:hover { background: #A6E765; color: #0F2A2A; }
#lp-app .outline:hover { background: #0F2A2A; color: #fff; }
#lp-app .pick:hover { border-color: #0F2A2A; background: #F8FAF9; }
#lp-app .cardh:hover { border-color: #CBD6D1; }
#lp-app .linkh:hover { border-color: #0F2A2A; }
#lp-app .ghost:hover { border-color: #0F2A2A; color: #0F2A2A; }
#lp-app .fdim:hover { color: #fff; border-color: #fff; }
#lp-app .crumb:hover { color: #0F2A2A; }
#lp-app .qbtn:hover { background: #F4F6F5; }

/* bildplatshållare — byt ut mot <img> i WordPress */
#lp-app .ph { position: absolute; inset: 0; border-radius: 14px; background: #EDF1EF; border: 1px dashed #C6D2CD; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-size: 12.5px; line-height: 1.4; color: #7C8C86; overflow: hidden; }
#lp-app .phbox { position: relative; }

#lp-app .gfooter { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }

@media (max-width: 900px) {
  #lp-app button, #lp-app .lime, #lp-app .outline { min-height: 44px; }
  #lp-app input { font-size: 16px !important; } /* hindrar iOS-zoom vid fokus */
}

@media (max-width: 1024px) {
  #lp-app .gfooter { grid-template-columns: 1fr 1fr; gap: 36px; }
  #lp-app .lp-hero { padding: 56px 24px 48px !important; }
  #lp-app .gsplit, #lp-app .gsplit-b, #lp-app .gsplit-c, #lp-app .gsplit-d,
  #lp-app .gsplit-e, #lp-app .gsplit-f, #lp-app .gsplit-g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #lp-app .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lp-app .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lp-app .h1-hero { font-size: 46px; }
  #lp-app .h1 { font-size: 36px; }
  #lp-app .h2 { font-size: 30px; }
  #lp-app .h2-sm { font-size: 26px; }
  #lp-app .rounded-xl { padding: 32px !important; }
}
/* abonnemangssida */
#lp-app .lp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
#lp-app .lp-pickrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

@media (max-width: 1150px) {
  #lp-app .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px; }
}
@media (max-width: 620px) {
  #lp-app .lp-plans { grid-template-columns: minmax(0, 1fr) !important; gap: 26px; }
  #lp-app .lp-pickrow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 860px) {
  /* hamburgare tar över: dölj skrivbordsmenyn helt */
  #lp-app .lp-nav { display: none !important; }
  #lp-app .lp-headcta { display: none !important; }
  #lp-app .lp-burger { display: flex !important; }
  #lp-app .lp-mobilenav { display: flex !important; }
  #lp-app header .wrap { flex-wrap: wrap; }
}

@media (max-width: 860px) {
  #lp-app header .wrap { padding: 10px 18px !important; row-gap: 8px !important; min-height: 64px; }
}

@media (max-width: 680px) {
  #lp-app .lp-tablewrap { border-radius: 16px; }
  #lp-app .lp-plan { padding: 26px 22px !important; }
  #lp-app details summary { font-size: 15.5px !important; }
  #lp-app .gfooter { grid-template-columns: 1fr; gap: 30px; }
  #lp-app .gprod { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  #lp-app .gprod .phbox { height: 140px !important; }
  #lp-app .lp-hero { padding: 40px 18px 40px !important; }
  #lp-app footer { padding: 48px 18px 28px !important; }
  #lp-app section[style*="padding:84px"], #lp-app section { padding-left: 18px; padding-right: 18px; }
  #lp-app aside { width: 100% !important; max-width: 100% !important; }
  #lp-app .ph { font-size: 11.5px; }
  #lp-app .sec { padding: 0 18px 64px; }
  #lp-app .g4, #lp-app .g3, #lp-app .g2, #lp-app .gopt, #lp-app .gopt4, #lp-app .gaddr { grid-template-columns: minmax(0, 1fr); }
  #lp-app .h1-hero { font-size: 36px; }
  #lp-app .h1 { font-size: 30px; }
  #lp-app .lead { font-size: 16px; }
  #lp-app .rounded-xl { padding: 22px !important; border-radius: 22px !important; }
  #lp-app .hide-sm { display: none !important; }
  #lp-app .stack-sm { flex-direction: column !important; align-items: stretch !important; }
}

/* ---------- subtila animationer ---------- */
#lp-app .phbox { overflow: hidden; }
#lp-app a, #lp-app button, #lp-app .phimg, #lp-app .lp-plan, #lp-app .cardh, #lp-app .pick, #lp-app .linkh {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
#lp-app .lime:hover, #lp-app .outline:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,42,42,.14); }
#lp-app .cardh:hover, #lp-app .lp-plan:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,42,42,.08); }
#lp-app .phbox:hover .phimg { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  #lp-app * { animation: none !important; transition: none !important; }
}

/* ---------- hover pa ovriga knappar (pill-formade utan egen klass) ---------- */
#lp-app a[style*="border-radius:999px"]:hover,
#lp-app button[style*="border-radius:999px"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15,42,42,.14);
}

/* ---------- responsiva bilder pa mobil ---------- */
@media (max-width: 640px) {
  #lp-app [style*="height:220px"] { height: 180px !important; }
  #lp-app [style*="height:210px"] { height: 180px !important; }
  #lp-app [style*="height:380px"] { height: 260px !important; }
}