@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800;900&display=swap");

/* Fixed square container */
.pe-embed-536{
  width:536px;
  height:536px;
  overflow:hidden;
  display:block;
}

/* Theme vars */
:root{
  --blue:#387DB8;       /* PAYearned */
  --blue-dark:#234086;  /* Competitor */
  --black:#000;
  --ink-700:#2b3238;
  --line:#e8edf5;
  --card:#fff;

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 6px 16px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:#000;
  background:#fff;
}

/* Fit the content inside the square */
.pe-wrap{
  width:100%;
  height:100%;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px; /* tighter overall rhythm */
}

/* Headings / Savings lines */
.pe-savings-line{
  text-align:center;
  font-weight:900;
  margin:0;
  line-height:1.15;
  font-size:32px;     /* big, uniform */
  white-space:nowrap;
}
.pe-savings-top{ color:var(--ink-700) }
.pe-saves-label{ color:var(--ink-700) }
.pe-saves-amount{ color:var(--blue-dark) }
.pe-saves-suffix{ color:var(--black) }

/* Full-width controls card (stacked sliders) */
.pe-controls-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px; /* slightly tighter */
}

/* Costs row */
.pe-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:start;   /* <-- don't stretch cards */
  flex:0 0 auto;       /* <-- let cards be only as tall as content */
}
@media(max-width:640px){ .pe-cards{grid-template-columns:1fr;} }

/* Cards (compact, no stretching) */
.pe-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:8px;                    /* tighter padding */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;     /* <-- stop filling empty space */
  gap:6px;
}

/* PAYearned tint */
.pe-card--payearned{
  background:#387DB81A;  /* ~10% tint */
  border-color:#387DB833;
}

/* Controls */
.pe-ctl{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:8px;
}
.ctl-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.ctl-label{
  font-weight:800;
  color:var(--ink-700);
  font-size:13px;
}

/* Slider row: long slider + tight value */
.ctl-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}
.range{
  -webkit-appearance:none;appearance:none;
  flex:1 1 auto;                 /* fill the row */
  width:auto;
  height:8px;border-radius:999px;outline:none;
  background:linear-gradient(90deg,var(--blue),var(--blue-dark));
  display:block;
  margin-left:0;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--blue-dark);
  box-shadow:0 2px 5px rgba(0,0,0,.15);cursor:grab
}
.range:active::-webkit-slider-thumb{cursor:grabbing}
.range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--blue-dark);
  box-shadow:0 2px 5px rgba(0,0,0,.15);cursor:grab
}
.range::-moz-range-track{
  height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--blue-dark))
}

/* Value pinned to right of slider (tight) */
.ctl-output{
  flex:0 0 auto;
  margin-left:4px;
  font-weight:900;
  color:#000;
  font-size:20px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  min-width:40px;
  text-align:right;
}

/* Cost cards (compact) */
.cost-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;               /* tighter */
  padding-top:8px;       /* was 12 */
  padding-bottom:8px;    /* was 12 */
}
.cost-price{
  font-size:32px;        /* keep big number */
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1;
  color:#000;
  white-space:nowrap;
}
.cost-note{
  color:#2b3238;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.cost-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:4px;       /* was 6 */
  border-top:1px dashed #e3e8ef;
}
.cost-name{
  font-weight:900;
  font-size:18px;        /* largest safe single line */
  letter-spacing:.01em;
  color:#000;
  white-space:nowrap;
}

/* Bottom savings line */
.pe-savings-bottom{
  margin-top:2px;
}









.accordion-795-1.fusion-panel {
border-radius: 10px;
}
#accordion-186-1 .fusion-panel {
	border-radius: 10px;
}
.accordion-795-1 {border-radius: 10px}

#accordion-795-1 .fusion-panel {
	border-radius: 10px;
}