@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
#exio-matrix {
  --xm-accent:#147456;
  --xm-tint:#f0f9f4;
  --xm-ink:#191326;
  --xm-muted:#736a82;
  background:#faf7fc;
  color:var(--xm-ink);
  font-family:Manrope,Arial,sans-serif;
  padding:42px 18px 28px;
  box-sizing:border-box;
  color-scheme:light
}

#exio-matrix * {
  box-sizing:border-box
}

#exio-matrix .xm-wrap {
  max-width:1120px;
  margin:auto
}

#exio-matrix .xm-head {
  text-align:center;
  max-width:690px;
  margin:0 auto 26px
}

#exio-matrix .xm-eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  color:var(--xm-accent);
  text-transform:uppercase;
  font-weight:800
}

#exio-matrix h2 {
  font-size:clamp(29px,4vw,43px);
  line-height:1.15;
  letter-spacing:-1.6px;
  font-weight:800;
  margin:13px 0;
  color:var(--xm-ink)
}

#exio-matrix .xm-head p {
  font-size:13px;
  line-height:1.7;
  color:var(--xm-muted);
  margin:0
}

#exio-matrix .xm-head p strong {
  color:var(--xm-ink);
  font-weight:700
}

#exio-matrix .xm-table {
  width:100%;
  border-spacing:0;
  border-collapse:separate;
  table-layout:fixed;
  background:#fff;
  border:1px solid #e4ddeb;
  border-radius:18px;
  overflow:hidden
}

#exio-matrix col:first-child {
  width:30%
}

#exio-matrix col {
  width:23.333%
}

#exio-matrix th,#exio-matrix td {
  font-weight:400;
  padding:15px 12px;
  vertical-align:middle;
  text-align:center;
  color:var(--xm-ink);
  border-bottom:1px solid #eee8f3;
  font-size:11px;
  line-height:1.6
}

#exio-matrix th:first-child {
  text-align:left;
  padding-left:18px;
  padding-right:14px
}

#exio-matrix thead th {
  vertical-align:top;
  padding:0 12px 19px;
  position:relative
}

#exio-matrix thead th:first-child {
  vertical-align:middle;
  background:#fcfbfd
}

#exio-matrix .xm-guide-title {
  font-size:19px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.5px;
  margin-bottom:11px
}

#exio-matrix .xm-guide-text {
  font-size:11px;
  line-height:1.8;
  color:var(--xm-muted);
  max-width:175px;
  margin:0
}

#exio-matrix .xm-guide-tag {
  display:inline-block;
  margin-top:15px;
  padding:5px 8px;
  background:#f0edf5;
  border-radius:6px;
  color:#766785;
  font-size:9px;
  font-weight:700
}

#exio-matrix .xm-ribbon {
  height:35px;
  margin:0 -12px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:var(--xm-accent);
  font-size:9px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  white-space:nowrap
}

#exio-matrix .xm-feature .xm-ribbon {
  background:var(--xm-accent);
  color:#fff
}

#exio-matrix .xm-ribbon svg {
  width:10px;
  height:10px;
  fill:#ffe2a7;
  stroke:#ffe2a7
}

#exio-matrix .xm-shield {
  width:42px;
  height:42px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#fbf4e7;
  color:#c38b2f
}

#exio-matrix .xm-shield svg {
  width:25px;
  height:25px
}

#exio-matrix .xm-feature .xm-shield {
  background:#d9eee3;
  color:var(--xm-accent)
}

#exio-matrix h3 {
  font-size:19px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.7px;
  margin:0 0 7px;
  color:var(--xm-ink);
  white-space:nowrap
}

#exio-matrix .xm-position {
  font-size:10px;
  line-height:1.65;
  min-height:35px;
  color:var(--xm-muted);
  margin:0 0 15px
}

#exio-matrix .xm-price {
  color:#191326 !important;
  font-size:34px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-1.3px;
  margin:0 0 7px;
  white-space:nowrap
}

#exio-matrix .xm-price span {
  color:#191326 !important;
  font-size:14px;
  letter-spacing:-.3px
}

#exio-matrix .xm-price small {
  font-size:9px;
  color:#736a82 !important;
  font-weight:500;
  letter-spacing:0
}

#exio-matrix .xm-gross {
  font-size:9px;
  color:var(--xm-muted);
  margin:0;
  line-height:1.6
}

#exio-matrix .xm-feature {
  background:var(--xm-tint);
  border-left:1px solid #a9d4bc;
  border-right:1px solid #a9d4bc
}

#exio-matrix .xm-row-label {
  font-size:11px;
  font-weight:700;
  color:var(--xm-ink);
  line-height:1.6
}

#exio-matrix .xm-row-label small {
  display:block;
  font-size:10px;
  font-weight:400;
  color:var(--xm-muted);
  line-height:1.6;
  margin-top:3px
}

#exio-matrix .xm-yes {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:700;
  color:#13835c
}

#exio-matrix .xm-yes svg {
  width:17px;
  height:17px;
  stroke-width:2.4
}

#exio-matrix .xm-no {
  color:#8a8197;
  font-size:10px
}

#exio-matrix .xm-key-row th,#exio-matrix .xm-key-row td {
  background:#f6f9f7
}

#exio-matrix .xm-key-row .xm-feature {
  background:#dfefe5
}

#exio-matrix .xm-key-row .xm-row-label {
  font-weight:800
}

#exio-matrix .xm-key-row .xm-feature .xm-yes {
  color:var(--xm-accent)
}

#exio-matrix .xm-report {
  font-size:10px;
  font-weight:700;
  color:#6d627e
}

#exio-matrix .xm-report.strong {
  color:var(--xm-ink)
}

#exio-matrix tfoot th,#exio-matrix tfoot td {
  padding-top:18px;
  padding-bottom:18px;
  border-bottom:0;
  vertical-align:top
}

#exio-matrix .xm-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-decoration:none;
  color:var(--xm-ink);
  border:1px solid #ded5e9;
  border-radius:9px;
  background:#fff;
  padding:11px 4px;
  font-size:10px;
  font-weight:800;
  line-height:1.5;
  min-height:44px;
  white-space:normal
}

#exio-matrix .xm-feature .xm-cta {
  color:#fff;
  background:var(--xm-accent);
  border-color:var(--xm-accent);
  box-shadow:0 5px 12px #14745620
}

#exio-matrix .xm-cta svg {
  width:13px;
  height:13px;
  flex-shrink:0
}

#exio-matrix .xm-under {
  font-size:9px;
  line-height:1.7;
  color:var(--xm-muted);
  margin:9px 0 0
}

#exio-matrix .xm-under b {
  color:var(--xm-ink);
  font-weight:700
}

#exio-matrix .xm-value {
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:13px;
  padding:18px 21px;
  margin-top:17px;
  border:1px solid #cfe4d8;
  background:#fff
}

#exio-matrix .xm-value-icon {
  width:37px;
  height:37px;
  flex-shrink:0;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--xm-tint);
  color:var(--xm-accent)
}

#exio-matrix .xm-value-icon svg {
  width:20px;
  height:20px
}

#exio-matrix .xm-value strong {
  display:block;
  font-size:13px;
  font-weight:800;
  line-height:1.6;
  color:var(--xm-ink)
}

#exio-matrix .xm-value p {
  margin:3px 0 0;
  font-size:11px;
  line-height:1.7;
  color:var(--xm-muted)
}

#exio-matrix .xm-footnotes {
  font-size:10px;
  color:var(--xm-muted);
  line-height:1.8;
  margin:17px 3px 0
}

#exio-matrix .xm-footnotes b {
  font-weight:700;
  color:var(--xm-ink)
}

#exio-matrix .xm-mobile-picker {
  display:none
}

#exio-matrix a:focus-visible,#exio-matrix button:focus-visible {
  outline:3px solid #66b397;
  outline-offset:3px
}

@media(min-width:900px) {
  #exio-matrix {
  padding:54px 30px 34px
}
#exio-matrix th,#exio-matrix td {
  padding:17px 22px;
  font-size:13px
}
#exio-matrix th:first-child {
  padding-left:25px
}
#exio-matrix thead th {
  padding:0 22px 24px
}
#exio-matrix .xm-ribbon {
  margin:0 -22px 20px;
  height:37px;
  font-size:10px
}
#exio-matrix h3 {
  font-size:25px
}
#exio-matrix .xm-position {
  font-size:12px;
  min-height:40px
}
#exio-matrix .xm-price {
  font-size:43px
}
#exio-matrix .xm-price span {
  font-size:19px
}
#exio-matrix .xm-price small {
  font-size:11px
}
#exio-matrix .xm-gross {
  font-size:11px
}
#exio-matrix .xm-row-label {
  font-size:13px
}
#exio-matrix .xm-row-label small,#exio-matrix .xm-yes,#exio-matrix .xm-no,#exio-matrix .xm-report {
  font-size:12px
}
#exio-matrix .xm-cta {
  font-size:12px
}
#exio-matrix .xm-under {
  font-size:11px
}
#exio-matrix .xm-guide-title {
  font-size:24px
}
#exio-matrix .xm-guide-text {
  font-size:13px;
  max-width:230px
}
#exio-matrix .xm-guide-tag {
  font-size:10px
}
#exio-matrix .xm-footnotes {
  font-size:11px
}

}

@media(max-width:620px) {
  #exio-matrix {
  padding:30px 14px 24px
}
#exio-matrix .xm-head {
  text-align:left
}
/* 2026-09-28 (Kamil): na telefonie POKAZUJEMY OBIE kolumny (lewo-prawo), zeby widac calosc,
   z wyjasnieniem pod kazdym wierszem. Picker jednej kolumny juz niepotrzebny. */
#exio-matrix .xm-mobile-picker {
  display:none
}
#exio-matrix .xm-table col:first-child {
  width:32%
}
#exio-matrix .xm-table col[data-plan] {
  width:34%
}
#exio-matrix .xm-table {
  table-layout:fixed;
  width:100%
}
#exio-matrix .xm-table [data-plan]:not(.xm-visible) {
  display:table-cell
}
#exio-matrix h3,#exio-matrix .xm-price {
  overflow-wrap:anywhere
}
#exio-matrix .xm-guide-title {
  font-size:15px;
  line-height:1.3;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none
}
/* wyjasnienie (podtytul) zawsze widoczne pod nazwa wiersza */
#exio-matrix .xm-row-label small {
  display:block
}
/* naglowki pakietow: zwiezle, zeby dwie kolumny sie zmiescily */
#exio-matrix thead .xm-position,
#exio-matrix thead .xm-gross,
#exio-matrix thead .xm-sklad {
  display:none
}
#exio-matrix th,#exio-matrix td {
  padding-left:6px;
  padding-right:6px
}
#exio-matrix td[data-plan],#exio-matrix th[data-plan] {
  text-align:center
}
#exio-matrix .xm-yes,#exio-matrix .xm-no {
  justify-content:center;
  text-align:center
}
#exio-matrix thead th {
  padding-bottom:18px
}
#exio-matrix h3 {
  font-size:13px;
  line-height:1.3
}
#exio-matrix .xm-ribbon span {
  font-size:7px
}
#exio-matrix .xm-guide-title {
  font-size:15px;
  line-height:1.3
}
#exio-matrix .xm-ribbon {
  font-size:8px;
  gap:3px
}
#exio-matrix .xm-ribbon svg {
  width:8px;
  height:8px
}
#exio-matrix th:first-child {
  padding-left:12px;
  padding-right:12px
}
#exio-matrix .xm-price {
  font-size:19px;
  line-height:1.2
}
#exio-matrix .xm-price span {
  font-size:12px
}
#exio-matrix .xm-price .xm-tylko-cena {
  display:block;
  font-size:9px
}
#exio-matrix .xm-position {
  font-size:11px
}
#exio-matrix .xm-value {
  padding:15px;
  align-items:flex-start
}
#exio-matrix .xm-value strong {
  font-size:12px
}
#exio-matrix .xm-row-label {
  font-size:12px
}
#exio-matrix .xm-feature {
  border-right:0
}
#exio-matrix .xm-yes,#exio-matrix .xm-no,#exio-matrix .xm-report {
  font-size:11px
}

}

#exio-matrix svg  {
   display:inline-block;
   vertical-align:middle;
   flex-shrink:0;
   
}



/* boczne przyciski tez kolorowe (nie puste): basic miętowy, plan czarny (PRO) */
#exio-matrix td[data-plan="basic"] .xm-cta{background:#e6f3ec;border-color:#bfe2ce;color:var(--xm-accent)}
#exio-matrix td[data-plan="basic"] .xm-cta:hover{background:#d8ece0}
#exio-matrix td[data-plan="plan"] .xm-cta{background:#181427;border-color:#181427;color:#fff}
#exio-matrix td[data-plan="plan"] .xm-cta:hover{background:#000}

/* kolory tarcz wg poziomu: 499 stalowa · 899 zlota · 599 czarna (PRO) */
#exio-matrix th[data-plan="basic"] .xm-shield{background:#eef1f5;color:#5b6472}
#exio-matrix .xm-feature .xm-shield{background:#fbf1dd;color:#c9962f}
#exio-matrix th[data-plan="plan"] .xm-shield{background:#181427;color:#fff}
#exio-matrix .xm-shield svg{width:24px;height:24px}