/* Shared planner cards and Figma radar layers. 390px design uses rem. */
.criteria h3 {
  color: var(--brand);
  text-align: center;
}
.criteria ol {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0 1.6rem;
  border-radius: 1.2rem;
  background: white;
  box-shadow: var(--card-shadow);
}
.criteria li {
  padding: 2rem 0;
  border-bottom: 0.1rem solid var(--line);
}
.criteria li:last-child {
  border: 0;
}
.criteria h4 {
  display: flex;
  gap: 0.4rem;
  align-items: start;
  font-size: 1.8rem;
  line-height: 3rem;
}
.criteria h4 span {
  flex-shrink: 0;
  width: 3.2rem;
  color: var(--brand);
  font-family: "Inter", sans-serif;
  font-size: 2rem;
}
.criteria p {
  margin-top: 0.8rem;
  color: var(--muted);
}
.comparison {
  margin-top: 3.2rem;
}
.comparison h3 {
  color: var(--brand);
}
.comparison > p:first-of-type {
  margin-top: 1.2rem;
}
.carousel {
  display: flex;
  overflow-x: auto;
  gap: 1.2rem;
  width: 39rem;
  margin-inline: -2rem;
  padding: 0 2rem 0.8rem;
  scroll-padding-inline: 2rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel > article {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.planner-carousel {
  margin-top: 1.2rem;
}
.planner-card {
  width: 34.2rem;
  overflow: hidden;
  border-radius: 1.6rem;
  background: white;
  box-shadow: 0 0.2rem 0.8rem rgb(22 32 46 / 6%);
}
.planner-header {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.8rem 2rem 1.6rem;
  background: linear-gradient(to right, #445c91, #303f68);
}
.planner-profile {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  height: 9.6rem;
}
.planner-avatar {
  position: relative;
  width: 9.6rem;
  height: 9.6rem;
  overflow: hidden;
  border-radius: 3.2rem;
  flex-shrink: 0;
}
.planner-avatar img {
  position: absolute;
  width: 355.89%;
  height: 355.89%;
  left: -38.15%;
  top: -10.57%;
}
.planner-avatar--2 img {
  left: -218.9%;
}
.planner-avatar--3 img {
  left: -128.52%;
}
.planner-profile h4 {
  margin-block: 0.4rem;
  color: white;
  font-size: 2rem;
  line-height: 3rem;
}
.certified {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  height: 2.7rem;
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
}
.certified img {
  width: 2.4rem;
  height: 2.4rem;
}
.planner-company {
  color: white;
  font-size: 1.4rem;
  line-height: 2.1rem;
  white-space: nowrap;
  font-weight: 400;
}
.planner-score {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
  height: 4.8rem;
  padding: 1.2rem;
  border-radius: 0.8rem;
  background: white;
}
.planner-score strong {
  margin-right: 1.2rem;
  color: #303f68;
  font-size: 1.4rem;
  white-space: nowrap;
}
.planner-score img {
  width: 2.4rem;
  height: 2.4rem;
}
.planner-score > span {
  color: #3e72cc;
  font-family: "Inter", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06rem;
}
.planner-score small {
  align-self: end;
  color: #535f73;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.planner-body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2rem;
}
.planner-comment h5 {
  display: table;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  background: #dceafa;
  color: #3e72cc;
  font-size: 1.2rem;
  line-height: 1.8rem;
}
.planner-comment p {
  margin-top: 0.8rem;
  color: #16202e;
  font-size: 1.4rem;
  line-height: 2.1rem;
  font-weight: 400;
}
.carousel-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--muted);
  line-height: 1.8rem;
}
.pagination {
  display: flex;
  gap: 0;
  margin-left: -0.6rem;
}
.pagination button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 1.8rem;
}
.pagination button::before {
  content: "";
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #d9e1eb;
}
.pagination button[aria-current="true"]::before {
  background: #3e72cc;
}
.planner-disclaimer {
  margin-top: 0.8rem;
  margin-bottom: 1.2rem;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2rem;
  text-align: center;
}
.planners-section > .section-cta {
  margin-top: 3.2rem;
}

.art-0371c49a {
  position: absolute;
  height: 9.0823rem;
  left: 9.925rem;
  top: 6.739rem;
  width: 9.5505rem;
}
.art-0e7cd8ff {
  overflow-wrap: break-word;
  position: absolute;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  left: 4.99rem;
  font-size: 1.3569rem;
  color: #535f73;
  text-align: center;
  top: 7.576rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
.art-1c9cb00a {
  position: absolute;
  height: 12.7871rem;
  left: 8.334rem;
  top: 5.066rem;
  width: 12.7334rem;
}
.art-1ce881b6 {
  position: absolute;
  inset: -1.09% -1% -0.94% -1.04%;
}
.art-294563b5 {
  position: absolute;
  inset: -0.62% -0.59%;
}
.art-4304a326 {
  overflow-wrap: break-word;
  position: absolute;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  left: 8.743rem;
  font-size: 1.3569rem;
  color: #535f73;
  text-align: center;
  top: 18.997rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
.art-4772ef64 {
  align-content: stretch;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
.art-5fb8b7a8 {
  position: absolute;
  height: 14.4606rem;
  left: 7.538rem;
  top: 3.392rem;
  width: 14.325rem;
}
.art-716fd215 {
  position: absolute;
  inset: -1.87% -1.78%;
}
.art-762f059c {
  position: absolute;
  inset: -0.92% -0.91% -0.83% -0.84%;
}
.art-85e971f3 {
  align-content: stretch;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  align-items: center;
  padding: 0rem;
  position: relative;
  flex-shrink: 0;
  width: 30.2rem;
}
.art-8b02bcf9 {
  position: absolute;
  inset: 0 -0.11% -0.22% -0.11%;
}
.art-8ce34ca0 {
  position: absolute;
  height: 12.1094rem;
  left: 8.333rem;
  top: 5.066rem;
  width: 12.7325rem;
}
.art-8ea3c1c8 {
  align-content: stretch;
  display: flex;
  gap: 2rem;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
.art-90b9ee37 {
  position: absolute;
  inset: -0.47% -0.44%;
}
.art-9b81fb20 {
  position: absolute;
  height: 15.1376rem;
  left: 6.742rem;
  top: 3.392rem;
  width: 15.9167rem;
}
.art-acc3667e {
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
}
.art-bfd4d662 {
  position: absolute;
  height: 3.0271rem;
  left: 13.108rem;
  top: 10.086rem;
  width: 3.1842rem;
}
.art-c979f547 {
  overflow-wrap: break-word;
  position: absolute;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  left: 20.736rem;
  font-size: 1.3569rem;
  color: #535f73;
  text-align: center;
  top: 18.997rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
.art-c9d657d2 {
  position: absolute;
  inset: -1.02% -0.91% -0.83% -0.95%;
}
.art-cd7f570a {
  position: absolute;
  inset: -0.93% -0.89%;
}
.art-d610100d {
  overflow-wrap: break-word;
  position: absolute;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  left: 24.468rem;
  font-size: 1.3569rem;
  color: #535f73;
  text-align: center;
  top: 7.576rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
.art-d8ef0aed {
  height: 22.6154rem;
  position: relative;
  flex-shrink: 0;
  width: 29.4rem;
}
.art-dd6b6341 {
  position: absolute;
  inset: -0.37% -0.36%;
}
.art-f00df10d {
  position: absolute;
  height: 6.0553rem;
  left: 11.517rem;
  top: 8.413rem;
  width: 6.3662rem;
}
.art-f52b9598 {
  border-width: 0.15rem;
  border-color: #3e72cc;
  border-style: solid;
  position: relative;
  border-radius: 0.4rem;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
}
.art-f66bb97a {
  overflow-wrap: break-word;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
  flex-shrink: 0;
  font-size: 1.2rem;
  color: #16202e;
  white-space: nowrap;
}
.art-f68101f3 {
  overflow-wrap: break-word;
  position: absolute;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  left: 14.736rem;
  font-size: 1.3569rem;
  color: #535f73;
  text-align: center;
  top: 0.565rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
.art-f6b49f04 {
  background-color: #cbd3de;
  border-width: 1px;
  border-color: #cbd3de;
  border-style: solid;
  position: relative;
  border-radius: 0.4rem;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
}